css做背景透明滤镜效果为什么文字也变透明了?

文字跟着背景一起透明,那是因为将背景和文字写在了一个父容器里了!而我们要做的就是将它们分离开,并设置div的z-index层序。

只想让背景有点透明,按钮和图标都是不透明的,怎么设置?

如上图,只想让背景有点透明,按钮和图标都是不透明的,怎么设置?

css透明滤镜效果在前端设计的时候经常使用,是前端的基础。

设计师将漂亮的设计稿给前端技术人员切片布局,前端人员往往会由于各种原因无法100%还原设计效果,这其中多数是兼容性问题,也有些是设计太个性化,前后端无法保证设计原有的效果。但是,有些不是客观因素,而是前端技术人员自身的道行不高(刚入门)!

事实上,前端技术人员要做的事情很多,知识面很广,不能局限在过去的切片布局(也叫做美工、切图仔..)。从html4到html5、css2到css3、pc端到wap手机移动端等都需要前端人员去过渡,这仅仅是从前端的界面布局效果层面上讲,随着深入我们还要和后台程序员协作从事js开发,处理业务数据逻辑等……

唉,一激动又唠叨啦!!下面回到正题。

透明滤镜效果的CSS主要代码:

  1. .filterBox,.filterBox2
  2.     position:absolute
  3.     left:50%
  4.     top:50%
  5.     margin:-100px 0 0 -100px
  6.     width:200px
  7.     height:200px
  8.     border:1px solid #999 
  9. .filterBox{ 
  10.     z-index:20 
  11. .filterBox2
  12.     z-index:10
  13.     background-color:#fff
  14.     opacity:0.7
  15.     filter:alpha(opacity=70

透明滤镜效果的HTML主要代码:

  1. <div class="filterBox"> 
  2.     <p style="padding:0 10px; line-height:150%"> 
  3.         <b>久久经验网</b>专注web技术分享。欢迎web爱好者的加入,前端技术QQ群:239274519(不止前端技术)<br /> 
  4.         网址:http://www.exp99.com 
  5.     </p> 
  6. </div> 
  7. <div class="filterBox2"></div> 

透明滤镜效果:

CSS实现透明滤镜效果
CSS实现透明滤镜效果

 

 

相关经验

导读书签
书签初始化中…