CSS实现背景透明而背景上的文字不透明

在我们设计制作一些网页的时候可能会用到半透明的效果，首先我们可能会想到用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实现背景透明而背景上的文字不透明相关推荐

HTML CSS 个人注册界面实现边框上加文字
实例:制作个人注册界面效果: HTML CSS 代码实现: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN ...
css文字背景虚化,通过实现背景模糊、文字颜色流光渐变、边框扩展等效果学习transition、transform、@keyframes等属性及伪元素的使用...
百度前端技术学院2017于2月24日开始进行,一共有6个学院可供学习,分别是小薇学院(html/css基础).斌斌学院(js基础).耀耀学院(小游戏/交互).商业平台学院(web/ios/androi ...
PHP 文字生成透明图片
准备: 1.打开GD2模块,在php.ini文件中把GD2打开即可. 2.准备一个适合在linux以及windows适用的字体文件代码: $text = "我爱中国";//显示的 ...
css如何实现背景透明，文字不透明？
之前做了个半透明弹层,但设置背景半透明时,子元素包含的字体及其它元素也都变成了半透明.对opacity这个属性认识的不透彻,在这里做一些总结,方便以后使用. 背景透明,文字不透明的解决方法: 为元素添 ...
css的三个特性背景透明设置
关于行内元素(补充一点) 行内元素只能容纳文本或其他行内元素.(a特殊a里面可以放块级元素) 例子: 关于行高tip: 选择器的嵌套层级不应大于3级,位置靠后的限定条件应尽可能的精确. 属性定义必须另 ...
css设置背景半透明，文字不透明效果
设置背景半透明,文字不透明效果一.常见的错误做法最常见的做法就是: 1.设置元素的opacity,这种设置出来的效果就是内容与背景都是半透明的,严重影响视觉效果. 2.设置background-c ...
html文本框背景text怎么变透明,css怎么设置背景图片透明文字不透明？
项目中经常会用到背景图上放一些文字介绍,这里介绍两种技术来实现背景图片透明,文字不透明效果.下面我们来看一下这两种方法的使用. CSS实现背景图片透明,文字不透明效果的两种方法: 方法一(半透明效果) ...
css如何实现背景透明，文字不透明
css如何实现背景透明,文字不透明? 之前做了个半透明弹层,但设置背景半透明时,子元素包含的字体及其它元素也都变成了半透明.对opacity这个属性认识的不透彻,在这里做一些总结,方便以后使用. 背景 ...
css实现背景颜色透明，文字不透明
1.背景颜色用rgba /*CSS*/ .demo{width: 100px;height: 100px;background: rgba(255,0,0,0.5);color: #000; } 这就 ...

CSS实现背景透明而背景上的文字不透明

CSS实现背景透明而背景上的文字不透明相关推荐

最新文章

热门文章