HTML/CSS

CSS实现背景图片透明和文字不透明效果

创客主机

项目中经常会用到背景图上放一些文字介绍,这里介绍两种技术来实现背景图片透明,文字不透明效果,记录一下,方便日后学习。

1.毛玻璃效果:

背景图 + 伪类 + flite:blur(3px)

CSS代码

  1. .demo1{
  2.     width: 500px;
  3.     height: 300px;
  4.     line-height: 50px;
  5.     text-align: center;
  6. }
  7. .demo1:before{
  8.     background: url(http://csssecrets.io/images/tiger.jpg) no-repeat;
  9.     background-size: cover;
  10.     width: 500px;
  11.     height: 300px;
  12.     content: "";
  13.     position: absolute;
  14.     top: 0;
  15.     left: 0;
  16.     z-index: -1;/*-1 可以当背景*/
  17.     -webkit-filter: blur(3px);
  18.     filter: blur(3px);
  19. }

HTML代码

  1. <div class="demo1">背景图半透明,文字不透明<br />方法:背景图+ filter:blur</div>

2.半透明效果:

背景图 + 定位 + background:rgba(255,255,255,0.3)

CSS代码

  1. .demo2-bg{
  2.     background: url(http://csssecrets.io/images/tiger.jpg) no-repeat;
  3.     background-size: cover;
  4.     width: 500px;
  5.     height: 300px;
  6.     position: relative;
  7. }
  8. .demo2{
  9.     position: absolute;
  10.     left: 0;
  11.     right: 0;
  12.     top: 0;
  13.     bottom: 0;
  14.     width: 500px;
  15.     height: 300px;
  16.     line-height: 50px;
  17.     text-align: center;
  18.     background:rgba(255,255,255,0.3);
  19. }

HTML代码

  1. <div class="demo2-bg">
  2.     <div class="demo2">背景图半透明,文字不透明<br />方法:定位+ background:rgba(255,255,255,0.3)</div>
  3. </div>

实例经验

  1. body:before { 
  2. content: " "; 
  3. position: fixed; 
  4. z-index: -1; 
  5. top: 0; 
  6. right: 0; 
  7. bottom: 0; 
  8. left: 0; background: url(http://xxx.png) center 0 no-repeat; 
  9. background-size: cover; 
  10. opacity: .3; }

以上所述是创客云小编给大家介绍的CSS实现背景图片透明而文字不透明效果的两种方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

(0)

本文由 创客云 作者:创客云 发表,转载请注明来源!

阿里云

热评文章

发表评论

嘿,欢迎咨询!