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实现背景透明而背景上的文字不透明的更多相关文章
- CSS实现背景透明而背景上的文字不透明完美解决
在我们设计制作一些网页的时候可能会用到半透明的效果,首先我们可能会想到用PNG图片处理,当然这是一个不错的办法,唯一的兼容性问题就是ie6 下的BUG,但这也不困难,加上一段js处理就行了.但假如我们 ...
- CSS实现Div透明,而显示在上面的文字不透明,但也可看到显示在下面的图片内容
CSS实现Div透明,而显示在上面的文字不透明,但也可看到显示在下面的图片内容,DiV透明其实挺简单,主要是为background定义opacity属性,一般这个是最大值是1,数值越接近1,则越不透明 ...
- css实现遮罩层(解决透明背景上的文字不透明)
.PopUp_layer{ position:fixed; top: 0; left: 0; right:0; bottom:0; width:100%; height:1 ...
- BootStrap 实现导航栏nav透明,nav子元素文字不透明
在给nav 的属性赋值 opacity:0.0透明度时会导致nav内子元素会继承opacity属性.此时再对子元素赋值opacity:1.0 时会导致 子元素实际opacity值为0.0*1.0=0. ...
- CSS实现DIV层背景透明而文字不透明
在我们设计制作一些网页的时候可能会用到半透明的效果,首先我们可能会想到用PNG图片处理,当然这是一个不错的办法,唯一的兼容性问题就是ie6 下的BUG,但这也不困难,加上一段js处理就行了.但假如我们 ...
- 【原】CSS实现背景透明,文字不透明,兼容所有浏览器
11.11是公司成立的日子,16岁啦,我呢3岁半,感谢公司给了这样一个平台,让我得以学习和成长,这里祝愿公司发展越来越好~ 进入主题,每年11月11号是光棍节,产生于校园,本来只是一流传于年轻人的娱乐 ...
- CSS实现背景透明,文字不透明,兼容所有浏览器
11.11是公司成立的日子,16岁啦,我呢3岁半,感谢公司给了这样一个平台,让我得以学习和成长,这里祝愿公司发展越来越好~ 进入主题,每年11月11号是光棍节,产生于校园,本来只是一流传于年轻人的娱乐 ...
- css如何实现背景透明,文字不透明?
之前做了个半透明弹层,但设置背景半透明时,子元素包含的字体及其它元素也都变成了半透明.对opacity这个属性认识的不透彻,在这里做一些总结,方便以后使用. 背景透明,文字不透明的解决方法: ...
- CSS实现背景透明,文字不透明(兼容所有浏览器)
我们平时所说的调整透明度,其实在样式中是调整不透明度,如下图所示例: 打开ps,在图层面板上,可以看到设置图层整理不透明度的菜单,从 0% (完全透明)到 100%(完全不透明). 实现透明的css方 ...
随机推荐
- Java System
从jdk10中摘录自认为几个比较重要的方法 系统类包含几个有用的属性和方法.它不能被实例化. 系统类提供的工具包括标准输入.标准输出和错误输出流:对外部定义的属性和环境变量的访问:加载文件和库的方法: ...
- Android Studio 插件-Android Styler 的使用 (转)
作用:把 xml文件 转为 style 截图保留 使用方法 使用方法:选中xml代码 按下 Ctrl+Shift+D 转自:http://blog.csdn.net/zxwd2015/article/ ...
- mysql5.6 基于Binlog ROW记录方式进行数据恢复(无备份)
数据库配置注意事项 /etc/my.cnf 必须要开户binlog支持,字符集要求 是utf8 binlog类型为row server-id=121 log_bin=/home/mysqllog bi ...
- sqoop2问题解决
sqoop:000> show version --serverException has occurred during processing command Exception: org.a ...
- hdu 1540 线段树
这题的意思是现在有一些村庄成一条直线排列,现在有三个操作,D:摧毁一个指定的村庄,Q:询问与指定村庄相连的村庄个数, 就是这个村庄向左和向右数村庄数量,遇到尽头或损坏的村庄为止,这个就是与这个村庄相连 ...
- 1、list 的一些相关操作 2、增删改查 3、tuple 的操作 4、range
1. list(增删改查) 列表可以装大量的数据. 不限制数据类型. 表示方式:[] 方括号中的每一项用逗号隔开 列表和字符串一样.也有索引和切片 # lst = [1, "周杰伦" ...
- 生成二维码的JAVA
不多说,上代码 package tcc; import java.awt.Color;import java.awt.Graphics2D;import java.awt.image.Buffered ...
- 分布式大数据多维数据分析(olap)引擎kylin[转]
Apache Kylin是一个开源的分布式分析引擎,提供Hadoop之上的SQL查询接口及多维分析(OLAP)能力以支持超大规模数据,最初由eBay 开发并贡献至开源社区.它能在亚秒内查询巨大的Hiv ...
- WEB框架之Django实现分页功能
一 Paginator分页器 1 首先在数据库中生成大量数据 def index(request) book_list = [] for i in rang(1000) book = Book(tit ...
- maven中导入包版本冲突的解决
导入struts包,在struts核心包的ognl包下存在javassist包: 然后再导入hibernate包,在hibernate核心下也存在javassist包: 这样便会存在冲突,ecplis ...