CSS实现背景透明而背景上的文字不透明
在我们设计制作一些网页的时候可能会用到半透明的效果,首先我们可能会想到用PNG图片处理,当然这是一个不错的办法,唯一的兼容性问题就是ie6下的BUG,但这也不困难,加上一段js处理就行了。但假如我们需要一个半透明遮罩的弹出层,如登陆框、注册框、提示等,这时可能需要整个页面都要被半透明的遮罩层覆盖,那么如用背景平铺的话,此时此刻也许就不是一个好办法了,图片大了会影响加载速度,图片小了同样会增加页面的渲染计算量,那么这时也许就需要用CSS滤镜了。
假如有这样一个例子:“有一个DIV块,此DIV是黑色半透明的,但此DIV里面的内容要保持原状,不能透明”,那么我们该怎么做呢?
假如HTML部分我们这样写的
1 2 3 4 5 6 7 8 9 10 11 |
|
对于CSS我们也许就这样写了
1 2 3 4 |
|
但经过测试我们发现,不仅div容器半透明了,连div里面的文字和图片都把透明了。由于这些滤镜的属性已经继承给了子元素,所以会出现这种效果。
我们可以用下面这种发法来实现
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
|
注意,上面background:rgba(0,0,0,0.6);只对ie9,ie10,FF,Chrome...等有效,不包括ie6,ie7,ie8,所以有了这几句代码:
1 2 |
|
另外还要对子级元素设置relative或者absolute属性,这样才能出现背景透明而背景上面的文字和图片正常显示的效果。
但这里的代码毅然不适合ie6,建议对于ie6就用png图片吧,然后用js做一下处理,可以参考我的另一篇文章