完美兼容的透明滤镜写法及继承修正方法

半透明效果是时下非常流行的网页效果之一,实现的方式很简单,比如filter:alpha(opacity=50)这是针对IE的。opacity=0.5,或者backgroud-color:rgba(255,0,0,0.5)这是针对火狐的,但是有一个问题是,使用半透明后,其中的内容也继承了半透明的属性,有时候这种效果并不是想要的,比如其中的文字不需要透明等,下面给出完美的写法及解决方案

<style type="text/css">
#container{ border:1px solid #c00; background-color:rgba(212,0,0,0.5); background:#f00\9; filter:alpha(opacity=50); width:500px; margin:40px auto; line-height:200%; font-size:14px; padding:14px;}
#container *{ position:relative;}//字体不再透明
</style>
</head>
<body>
<div id="container">
<span>我是朱宝祥我是朱宝祥我是朱宝祥我是朱宝祥我是朱宝祥</span>
</div>
</body>

这样就可以完美的兼容了,请大家鉴定

原文链接:,转发请注明来源!

发表评论

  • 6 Responses to “完美兼容的透明滤镜写法及继承修正方法”
    • 雪狐博客

      好吧.你这段代码貌似在火狐下是无法打到透明效果的. filter:alpha(opacity=50);这个属性只有IE支持.

      回复
      • 有没有注意到我用rgba设置的背景色?那个0.5 就是透明度,火狐支持

        朱宝祥 回复私信
    • 雪狐博客

      这个只能兼容IE浏览器,火狐还是不行!

      回复
      • 又测试了一遍,没有任何问题!文字不透明

        朱宝祥 回复私信
        • 你是在火狐下测试的吗? 我在firefox 12.0版本下测试不行!

          雪狐博客 回复
          • 我用的就是火狐12.0,你把透明度调整到0.1,并给body加个背景色看下,这样效果更明显

            朱宝祥 回复私信