在我们设计制作一些网页的时候可能会用到半透明的效果,首先我们可能会想到用PNG图片处理,当然这是一个不错的办法,唯一的兼容性问题就是ie6 下的BUG,但这也不困难,加上一段js处理就行了。但假如我们需要一个半透明遮罩的弹出层,如登陆框、注册框、提示等,这时可能需要整个页面都要被半透 明的遮罩层覆盖,那么如用背景平铺的话,此时此刻也许就不是一个好办法了,图片大了会影响加载速度,图片小了同样会增加页面的渲染计算量,那么这时也许就 需要用CSS滤镜了。
假如有这样一个例子:“有一个DIV块,此DIV是黑色半透明的,但此DIV里面的内容要保持原状,不能透明”,那么我们该怎么做呢?
假如HTML部分我们这样写的
<div class="touMingDiv"> <div> <h1>这是透明的层这是透明的层这是透明的层这是透明的层 这是透明的层这是透明的层这是透明的层这是透明的层这是透明的层 </h1> </div> <p> 这是透明的层,但上边的文字和图片均不透明,兼容ie7,ie8,ie9,ie10,FF,Chrome </p> <img src="bg.jpg"/> </div>
对于CSS我们也许就这样写了
.touMingDiv{ filter:Alpha(opacity=60); opacity:0.6; }
但经过测试我们发现,不仅div容器半透明了,连div里面的文字和图片都把透明了。由于这些滤镜的属性已经继承给了子元素,所以会出现这种效果。
我们可以用下面这种发法来实现
.touMingDiv{ width:800px; min-height:300px; color:#fff; background:rgba(0,0,0,0.6); background:#000 9;/*CSS Hack,只能对ie9以下浏览器ie6,ie7,ie8有效,否侧ie10,FF,Cherome会失去透明效果*/ filter:Alpha(opacity=60);/*只对ie7,ie8有效*/ } .touMingDiv p, .touMingDiv div, .touMingDiv img{ position:relative; /*或者是absolute,都可以使文字不透明,这样做还是为了 兼容ie9,ie8,ie7下背景透明而而背景上的文字不透明的效果*/ }
注意,上面background:rgba(0,0,0,0.6);只对ie9,ie10,FF,Chrome...等有效,不包括ie6,ie7,ie8,所以有了这几句代码:
background:#000 9;/*CSS Hack,只能对ie9以下浏览器ie6,ie7,ie8有效,否侧ie10,FF,Cherome会失去透明效果*/ filter:Alpha(opacity=60);/*只对ie7,ie8有效*/
另外还要对子级元素设置relative或者absolute属性,这样才能出现背景透明而背景上面的文字和图片正常显示的效果。
但这里的代码毅然不适合ie6,建议对于ie6就用png图片吧,然后用js做一下处理。
来源: http://beyondweb.cn/article_detail.php?id=43
相关推荐
CSS代码实现背景透明而文字不透明,兼容支持火狐、360、谷歌、IE6-IE11等浏览器
在 FF/Chrome 等较新的浏览器中可以使用css属性background-color的rgba轻松实现背景透明,而文字保持不透明。而IE6/7/8浏览器不支持 rgba,只有使用IE的专属滤镜filter:Alpha来实现,但是这样写法会把文字也变为透明...
主要介绍了CSS实现背景图片透明而文字不透明效果的两种方法,需要的朋友可以参考下
本文介绍了css实现背景半透明文字不透明的效果示例,分享给大家,具体如下: 效果如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style...
IE6是大家都十分头痛的一个浏览器,为了...背景透明</title><style>body{margin:0;padding:0;}.back{width:800px;height:700px;background:url(images/超级金属.png);background-repeat:no-repeat;padding
主要介绍了CSS3实现背景透明文字不透明的示例代码的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
在某些情况下可能会需要背景半透明文字不透明这样的效果,实现起来并不复杂,通过滤镜便可做到,具体实现如下,感兴趣的朋友可以参考下,希望对大家有所帮助
前面的 3 个值是 RGB 颜色值,最后一个值是透明度的级别(0 = 透明,1 = 不透明)。 RGBA 可以应用于与颜色的任何属性,如字体颜色,边框颜色,背景颜色,阴影颜色等。 Text Shadow 文字阴影的结构顺序为:x 轴...
目标是创建没有JavaScript,没有CSS,没有UpdatePanel,没有WebServices的Web应用程序。 支持的浏览器: IE 7.0+, Firefox 3.0+, Chrome 2.0+, Opera 9.5+, Safari 3.0+ 注:ExtAspNet基于一些开源的程序ExtJS, ...
-实际上IE7下所以的回发都慢,原因是客户端的Base64编码速度慢,已经使用encodeURIComponent来代替Base64编码。 -俄语翻译(feedback:vbelyaev)。 +2010-06-30 v2.3.1 -ExtAspNet控件将不在依赖ViewState,...