css3之透明滤镜新用法

最新推荐文章于 2020-06-03 10:24:00 发布

weixin_34297704

最新推荐文章于 2020-06-03 10:24:00 发布

阅读量118

点赞数

文章标签： xhtml

本文介绍如何利用CSS3的RGBA属性实现背景透明而文字不透明的效果，并提供兼容IE浏览器的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

按照css2之前的滤镜属性opacity，会继承到内容上，也就是说我们给一个div设置了opacity：0.5，div里的文字也会出现半透明效果。点此查看Demo。
为了避免这种情况发生，我们不得不多增加一个div，用来透明背景，而另外一个放内容的div就不设背景，只要这2个div大小坐标保持一致，且放内容的div显示在透明背景的div上就达到效果了，点此查看Demo。

Demo代码：

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />
< title >无标题文档 </ title >
< style type ="text/css" >

</ style >
</ head >
< body >
     < div class ="imgDiv" >
         < img src ="http://www.caoren.net/pic/20101107/20101107css.jpg" width ="300" height ="450" />
         < div class ="opacity" ></ div >
         < p >这个肯定是美女 </ p >
     </ div >
</ body >
</ html >

大家比较这2个demo就可以看出效果。
现在有了css3的rgba这个属性，就不用这么麻烦了，当然这也得要浏览器支持才行。一般童鞋们定义颜色都是用十六进制表示。如：background:#000000，表示背景色为黑色。当然也可以用RGB三原色值表示，如：background:rgb(0,0,0)，也表示背景色为黑色。rgba只是在rgb的基础上增加了一个a，这个a表示透明度。而且这个属性不会被子元素继承下去，可以在定义颜色的属性使用，如：

这样我们要实现背景透明内容不透明就不必增加一个div了，但是ie目前的版本都不支持该属性(不知道ie9是否支持)，所以我增加一个ie条件注释，就是在ie下还是用上面的方法。测试通过环境：ff3.6，safari5，ie6,7,8。
点此查看完整Demo。

Demo代码：

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />
< title >无标题文档 </ title >
< style type ="text/css" >
    
     </ style >
</ head >
< body >
     < div class ="imgDiv" >
         < img src ="http://www.caoren.net/pic/20101107/20101107css.jpg" width ="300" height ="450" />
         
         < p >这个肯定是美女 </ p >
     </ div >
</ body >
</ html >

转自：http://www.caoren.net/article/?id=22

个人收藏学习用