在我们设计制作一些网页的时候可能会用到半透明的效果,首先我们可能会想到用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. bit、sbin、sfr、sfr16 区别分析

    1.bit 和 sbit 都是 C51 扩展的变量类型. bit 和 int char 之类的差不多,只不过 char=8 位, bit=1 位而已.都是变量,编译器在编译过程中分配地址.除非你指定, ...

  2. Cortex-M0系统滴答定时器Systick详解

    上图是LPC1114系统滴答定时器(SysTick)的结构图.系统滴答定时器位于Cortex-M0内核中,也就是说,不论是LPC1114,还是其他的Cortex-M0内核单片机,都有这个系统定时器.其 ...

  3. Qt tip 网络请求 QNetworkRequest QJason 处理 JSON

    http://blog.csdn.net/linbounconstraint/article/details/52399415 http://download.csdn.net/detail/linb ...

  4. sphinx插入css

    使用role指令达到目的. We can put following lines at the beginning of our RST file to specify its style. .. r ...

  5. 【HDOJ】3451 Beat drop

    BFS.当水滴破裂飞溅后,直到碰到水滴才会停止(观察case1).同时,考虑当水滴飞溅到点(x,y)并且该点同一时间破裂的情况,该水滴算作吸收. /* 3451 */ #include <ios ...

  6. 【Linux】鸟哥的Linux私房菜基础学习篇整理(二)

    1. dumpe2fs [-bh] devicename:查询superblock信息.参数:-b:列出保留为坏道的部分:-h:列出superblock的数据,不会列出其他的区段内容. 2. df [ ...

  7. 【图片处理】ImageMagick, gm

    ImageMagick: Convert, Edit, Or Compose Bitmap Images http://www.imagemagick.org/script/binary-releas ...

  8. POJ 3177 Redundant Paths(重边标记法,有重边的边双连通分支)

    大致题意: 为了保护放牧环境,避免牲畜过度啃咬同一个地方的草皮,牧场主决定利用不断迁移牲畜进行喂养的方法去保护牧草.然而牲畜在迁移过程中也会啃食路上的牧草,所以如果每次迁移都用同一条道路,那么该条道路 ...

  9. 【转】 为SeekBar滑块设置固定值以及自定义Seekbar,progressbar样式--不错

    原文网址:http://blog.csdn.net/jdsjlzx/article/details/7804080 最近在项目中使用到了seekbar和progressbar,且必须按照设计要求来进行 ...

  10. Android Weekly Notes Issue #239

    Android Weekly Issue #239 January 8th, 2017 Android Weekly Issue #239 本期内容包括: Android Things开发; Andr ...