在我们设计制作一些网页的时候可能会用到半透明的效果,首先我们可能会想到用PNG图片处理,当然这是一个不错的办法,唯一的兼容性问题就是ie6 下的BUG,但这也不困难,加上一段js处理就行了。但假如我们需要一个半透明遮罩的弹出层,如登陆框、注册框、提示等,这时可能需要整个页面都要被半透 明的遮罩层覆盖,那么如用背景平铺的话,此时此刻也许就不是一个好办法了,图片大了会影响加载速度,图片小了同样会增加页面的渲染计算量,那么这时也许就 需要用CSS滤镜了。

假如有这样一个例子:“有一个DIV块,此DIV是黑色半透明的,但此DIV里面的内容要保持原状,不能透明”,那么我们该怎么做呢?

假如HTML部分我们这样写的

  1. <div class="touMingDiv">
  2. <div>
  3. <h1>这是透明的层这是透明的层这是透明的层这是透明的层
  4. 这是透明的层这是透明的层这是透明的层这是透明的层这是透明的层
  5. </h1>
  6. </div>
  7. <p>
  8. 这是透明的层,但上边的文字和图片均不透明,兼容ie7,ie8,ie9,ie10,FF,Chrome
  9. </p>
  10. <img src="bg.jpg"/>
  11. </div>
<div class="touMingDiv">
<div>
<h1>这是透明的层这是透明的层这是透明的层这是透明的层
这是透明的层这是透明的层这是透明的层这是透明的层这是透明的层
</h1>
</div>
<p>
这是透明的层,但上边的文字和图片均不透明,兼容ie7,ie8,ie9,ie10,FF,Chrome
</p>
<img src="bg.jpg"/>
</div>

对于CSS我们也许就这样写了

  1. .touMingDiv{
  2. filter:Alpha(opacity=60);
  3. opacity:0.6;
  4. }
.touMingDiv{
filter:Alpha(opacity=60);
opacity:0.6;
}

但经过测试我们发现,不仅div容器半透明了,连div里面的文字和图片都把透明了。由于这些滤镜的属性已经继承给了子元素,所以会出现这种效果。

我们可以用下面这种发法来实现

  1. .touMingDiv{
  2. width:800px;
  3. min-height:300px;
  4. color:#fff;
  5. background:rgba(0,0,0,0.6);
  6. background:#000 \9;/*CSS Hack,只能对ie9以下浏览器ie6,ie7,ie8有效,否侧ie10,FF,Cherome会失去透明效果*/
  7. filter:Alpha(opacity=60);/*只对ie7,ie8有效*/
  8. }
  9. .touMingDiv p,
  10. .touMingDiv div,
  11. .touMingDiv img{
  12. position:relative;
  13. /*或者是absolute,都可以使文字不透明,这样做还是为了
  14. 兼容ie9,ie8,ie7下背景透明而而背景上的文字不透明的效果*/
  15. }
.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,所以有了这几句代码:

  1. background:#000 9;/*CSS Hack,只能对ie9以下浏览器ie6,ie7,ie8有效,否侧ie10,FF,Cherome会失去透明效果*/
  2. filter:Alpha(opacity=60);/*只对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做一下处理。

CSS实现背景透明而背景上的文字不透明完美解决的更多相关文章

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

    在我们设计制作一些网页的时候可能会用到半透明的效果,首先我们可能会想到用PNG图片处理,当然这是一个不错的办法,唯一的兼容性问题就是ie6 下的BUG,但这也不困难,加上一段js处理就行了.但假如我们 ...

  2. CSS实现Div透明,而显示在上面的文字不透明,但也可看到显示在下面的图片内容

    CSS实现Div透明,而显示在上面的文字不透明,但也可看到显示在下面的图片内容,DiV透明其实挺简单,主要是为background定义opacity属性,一般这个是最大值是1,数值越接近1,则越不透明 ...

  3. css实现遮罩层(解决透明背景上的文字不透明)

    .PopUp_layer{   position:fixed;   top: 0;   left: 0;   right:0;   bottom:0;   width:100%;   height:1 ...

  4. Flash Stage3D 在2D UI 界面上显示3D模型问题完美解决

    一直以来很多Stage3D开发者都在为3D模型在2DUI上显示的问题头疼.Stage3D一直是在 Stage2D下面.为了做到3D模型在2DUI上显示通常大家有几种实现方式,下面来说说这几种实现方式吧 ...

  5. BootStrap 实现导航栏nav透明,nav子元素文字不透明

    在给nav 的属性赋值 opacity:0.0透明度时会导致nav内子元素会继承opacity属性.此时再对子元素赋值opacity:1.0 时会导致 子元素实际opacity值为0.0*1.0=0. ...

  6. CSS实现DIV层背景透明而文字不透明

    在我们设计制作一些网页的时候可能会用到半透明的效果,首先我们可能会想到用PNG图片处理,当然这是一个不错的办法,唯一的兼容性问题就是ie6 下的BUG,但这也不困难,加上一段js处理就行了.但假如我们 ...

  7. 【原】CSS实现背景透明,文字不透明,兼容所有浏览器

    11.11是公司成立的日子,16岁啦,我呢3岁半,感谢公司给了这样一个平台,让我得以学习和成长,这里祝愿公司发展越来越好~ 进入主题,每年11月11号是光棍节,产生于校园,本来只是一流传于年轻人的娱乐 ...

  8. CSS实现背景透明,文字不透明,兼容所有浏览器

    11.11是公司成立的日子,16岁啦,我呢3岁半,感谢公司给了这样一个平台,让我得以学习和成长,这里祝愿公司发展越来越好~ 进入主题,每年11月11号是光棍节,产生于校园,本来只是一流传于年轻人的娱乐 ...

  9. css如何实现背景透明,文字不透明?

    之前做了个半透明弹层,但设置背景半透明时,子元素包含的字体及其它元素也都变成了半透明.对opacity这个属性认识的不透彻,在这里做一些总结,方便以后使用.   背景透明,文字不透明的解决方法:   ...

随机推荐

  1. Markdown 测试

    量化派业务参考代码 测试二级标题 如果 merchant_id 是外部白条,则执行相关逻辑 if(order.getMerchantId() == Constants.BaitiaoMerchant. ...

  2. iOS证书详解--再转

    一.成员介绍1.    Certification(证书)证书是对电脑开发资格的认证,每个开发者帐号有一套,分为两种:1)    Developer Certification(开发证书)安装在电脑上 ...

  3. 一定要记住这20种PS技术!!!会让你的照片美的不行!!!

    一种简单的数码照片后期润饰 1 打开图片,执行色像/饱和度(-40)降低饱和度. 2 新建一图层,将图层模式改为柔光,用画笔工具将需要润饰的部分画几下,这里可以利用色板方便的提取颜色 3 图片色彩过渡 ...

  4. 剖析并利用Visual Studio Code在Mac上编译、调试c#程序【转】

    0x00 前言 一周多以前的微软的Build大会上,微软发布了一个让很多人眼前一亮的工具,也是本文的主角——Visual Studio Code.很多使用Windows的朋友都很高兴,认为又多了一个很 ...

  5. TF-IDF与余弦相似性的应用

    类似的算法已经被写成了工具,比如基于Java的Classifier4J库的SimpleSummariser模块.基于C语言的OTS库.以及基于classifier4J的C#实现和python实现.

  6. hibernate spring sturts2配置

    <?xml version='1.0' encoding='utf-8'?> <!DOCTYPE hibernate-configuration PUBLIC "-//Hi ...

  7. ConnectifyHotspotInstaller3.7注册码

    ConnectifyHotspotInstaller3.7注册码 邮箱: wcxu21@126.com 密 钥:QEX4HR-9VLS2N-AXFA3A-K8CD8M-1DQ7Q1-CCDDTB-KL ...

  8. mysql存储过程写法—动态参数运用

    --删除 双击代码全选 1 drop procedure if exists up_common_select --创建 双击代码全选 1 2 3 4 5 6 7 8 9 10 11 12 13 14 ...

  9. No row with the given identifier exists[ArtProject.Domains.Users#2]

      产生此问题的原因:              有两张表,table1和table2. 产生此问题的原因就是table1里做了关联<one-to-one>或者<many-to-on ...

  10. ♫【异步】短小强悍的JavaScript异步调用库

    短小强悍的JavaScript异步调用库 var queue = function(funcs, scope) { (function next() { if(funcs.length > 0) ...