【原】CSS实现背景透明，文字不透明，兼容所有浏览器-爱编程
【原】CSS实现背景透明，文字不透明，兼容所有浏览器
11.11也是公司成立的日子，16岁啦，我呢3岁半，感谢公司给了这样一个平台，让我得以学习和成长，这里祝愿公司发展越来越好~
进入主题，每年11月11号是光棍节，产生于校园，本来只是一流传于年轻人的娱乐性节日，以庆祝自己仍是单身一族为骄傲，而如今是各大商家以脱光为由打折促销的时期，成为了所谓的&购物节&，双11也算了，后面还要搞双12，不得不吐槽下。
于是呢，熬夜加班做了11.11的活动，在PC端遇到了透明背景和透明图片的问题，其实以前也遇到过，只是没有总结起来，就忘记了，这次又撞墙了，必须记录下来，一来给自己做个小总结，二来是因为在网络上并没有完整的解决方案，希望可以帮助到遇到此类问题的朋友，今天主要讲解背景透明的解决方案，共勉~
重点内容入口：
测试浏览器：
VirtIE6、虚拟机下XP的IE6、纯正IE8、纯正IE8下QQ浏览器、WIN7下的IE 9.0.32 、WIN8下的IE 10.0.21、chrome 38.0 、QQ浏览器8.0-IE10.0.5、safari 5.1.7、opera 25.0
如何实现背景透明，文字不透明，兼容所有浏览器？
我们平时所说的调整透明度，其实在样式中是调整不透明度，如下图所示例：
打开ps，在图层面板上，可以看到设置图层整理不透明度的菜单，从 0% （完全透明）到 100%（完全不透明）。
实现透明的css方法通常有以下3种方式，以下是不透明度都为80%的写法
css3的，x 的取值从 0 到 1，如opacity: 0.8
css3的，alpha的取值从 0 到 1，如rgba(255,255,255,0.8)
IE专属滤镜&filter:Alpha(opacity=x)，x 的取值从 0 到 100，如filter:Alpha(opacity=80)
css3的opacity
兼容性：IE6、7、8不支持，IE9及以上版本和标准浏览器都支持
使用说明：设置opacity元素的所有后代元素会随着一起具有透明性，一般用于调整图片或者模块的整体不透明度
&!DOCTYPE html&
&meta charset="utf-8"&
&title&opacity&/title&
padding: 0;
margin: 0;
padding: 50px;
background: url(img/bg.png) 0 0 repeat;
padding: 25px;
background-color:#000000;
opacity: 0.2;
color: #FFFFFF;
&div class="demo"&
&p&背景透明，文字也透明&/p&
使用opacity后整个模块都透明了，展现如下：
那么使用opacity实现《背景透明，文字不透明》是不可取的。
css3的rgba
兼容性：IE6、7、8不支持，IE9及以上版本和标准浏览器都支持
使用说明：设置颜色的不透明度，一般用于调整background-color、color、box-shadow等的不透明度。
&!DOCTYPE html&
&meta charset="utf-8"&
&title&css3的rgba&/title&
padding: 0;
margin: 0;
padding: 50px;
background: url(img/bg.png) 0 0 repeat;
padding: 25px;
background-color:#000000;/* IE6和部分IE7内核的浏览器(如QQ浏览器)下颜色被覆盖 */
background-color:rgba(0,0,0,0.2); /* IE6和部分IE7内核的浏览器(如QQ浏览器)会读懂，但解析为透明 */
color: #FFFFFF;
&div class="demo"&
&p&背景透明，文字也透明&/p&
在background-color中使用rgba，标准浏览器中，背景透明，文字不透明，展现如下：
很奇葩的是，IE6和部分IE7内核的浏览器(如QQ浏览器)会读懂rgba，解析后颜色为透明，其实应该是null
那么使用opacity实现背景透明，文字不透明是可取的。
IE专属滤镜&filter:Alpha(opacity=x)
使用说明：IE浏览器专属，问题多多，本文以设置背景透明为例子，如下：
仅支持IE6、7、8、9，在IE10版本被废除
在IE6、7中，需要激活IE的haslayout属性(如：*zoom:1或者*overflow:hidden)，让它读懂filter:Alpha
在IE6、7、8中，设置了filter:Alpha的元素，父元素设置position:static(默认属性)，其子元素为相对定位，可让子元素不透明
&!DOCTYPE html&
&meta charset="utf-8"&
&title&opacity&/title&
padding: 0;
margin: 0;
padding: 50px;
background: url(img/bg.png) 0 0 repeat;
padding: 25px;
background: #000000;
filter:Alpha(opacity=50);/* 只支持IE6、7、8、9 */
position:static; /* IE6、7、8只能设置position:static(默认属性) ，否则会导致子元素继承Alpha值 */
*zoom:1; /* 激活IE6、7的haslayout属性，让它读懂Alpha */
color: #FFFFFF;
position: relative;/* 设置子元素为相对定位，可让子元素不继承Alpha值，保证字体颜色不透明 */
&div class="demo"&
&p&背景透明，文字不透明&/p&
全兼容的方案
上以上3点分析可知，设置透明背景文字不透明，可采用的属性有rgba和IE的专属滤镜filter:Alpha，其兼容性如下图所示：
针对IE6、7、8浏览器，我们可以采用fiter:Alpha，针对标准浏览器我们采用rgba，那么问题来了，IE9浏览器2个属性都支持，一起使用会重复降低不透明度...
那么，如何只对IE6、7、8使用fiter:Alpha如何实现呢？2年前写过《》一文，最新我也做了点更新，里面有IE的相关hack，找到只支持IE 6、7、8的方案，如下：
/* 只支持IE6、7、8 */
@media \0screen\,screen\9 {...}
ok，所有问题都解决了，全部代码如下：
&!DOCTYPE html&
&meta charset="utf-8"&
&title&背景透明，文字不透明&/title&
padding: 0;
margin: 0;
padding: 50px;
background: url(img/bg.png) 0 0 repeat;
padding: 25px;
background-color: rgba(0,0,0,0.5);/* IE9、标准浏览器、IE6和部分IE7内核的浏览器(如QQ浏览器)会读懂 */
color: #FFFFFF;
@media \0screen\,screen\9 {/* 只支持IE6、7、8 */
background-color:#000000;
filter:Alpha(opacity=50);
position:static; /* IE6、7、8只能设置position:static(默认属性) ，否则会导致子元素继承Alpha值 */
*zoom:1; /* 激活IE6、7的haslayout属性，让它读懂Alpha */
position: relative;/* 设置子元素为相对定位，可让子元素不继承Alpha值 */
&div class="demo"&
&p&背景透明，文字不透明&/p&
版权所有 爱编程 (C) Copyright 2012. . All Rights Reserved.
闽ICP备号-3
微信扫一扫关注爱编程，每天为您推送一篇经典技术文章。问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
&header id="header"&
&div class="container"&
&div class="logo"&&/div&
&nav class="menu"&
&li&&a&菜单&/a&&/li&
background:#
background:rgba(255, 255, 255, 0.5) none repeat scroll 0 0 !/*实现FF背景透明，文字不透明*/
opacity:0.5;
filter:alpha(opacity=50);
-moz-opacity:0.5;
width:100%;
line-height:60
z-index:99;
#header .logo{
background-image:url(img/logo.png);
background-size:
margin:10px 0;
width:100%;
nav.menu ul{
margin-left:15
nav.menu ul li{
display:inline-
nav.menu ul li a{
line-height:60
padding:0 20
color:#000;
怎么使得header的背景半透明而文字和图片不透明呢，我找到的资料是把父元素设置成半透明，子元素的position设置成relative，按照网上的一些方法设置后文字和图片还是会和背景一样半透明，求解。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
你 header部分又没有背景图片 ，rgba就含有透明效果了，但是低版本IE不兼容
opacity:0.5;
filter:alpha(opacity=50);
-moz-opacity:0.5;
就可以了，如果你要全兼容的话做个和header一样大的box定位于header之下，再加上上面三句就可以了
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
父元素透明，子元素不透明，演示地址：
同步到新浪微博
分享到微博？
你好！看起来你挺喜欢这个内容，但是你还没有注册帐号。 当你创建了帐号，我们能准确地追踪你关注的问题，在有新答案或内容的时候收到网页和邮件通知。还能直接向作者咨询更多细节。如果上面的内容有帮助，记得点赞 (????)? 表示感谢。
明天提醒我
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
扫扫下载 App
SegmentFault
一起探索更多未知11.11是公司成立的日子，16岁啦，我呢3岁半，感谢公司给了这样一个平台，让我得以学习和成长，这里祝愿公司发展越来越好~
进入主题，每年11月11号是光棍节，产生于校园，本来只是一流传于年轻人的娱乐性节日，以庆祝自己仍是单身一族为骄傲，而如今是各大商家以脱光为由打折促销的时期，成为了所谓的&购物节&，双11也算了，后面还要搞双12，不得不吐槽下。
于是呢，熬夜加班做了11.11的活动，在PC端遇到了透明背景和透明图片的问题，其实以前也遇到过，只是没有总结起来，就忘记了，这次又撞墙了，必须记录下来，一来给自己做个小总结，提个醒，最近变懒了，再不努力就要倒挂了；二来是因为在网络上并没有完整的解决方案，希望可以帮助到遇到此类问题的朋友，今天主要讲解背景透明的解决方案，共勉~
重点内容入口：
测试浏览器：
VirtIE6、虚拟机下XP的IE6、纯正IE8、纯正IE8下QQ浏览器、WIN7下的IE 9.0.32 、WIN8下的IE 10.0.21、chrome 38.0 、QQ浏览器8.0-IE10.0.5、safari 5.1.7、opera 25.0
如何实现背景透明，文字不透明，兼容所有浏览器？
我们平时所说的调整透明度，其实在样式中是调整不透明度，如下图所示例：
打开ps，在图层面板上，可以看到设置图层整理不透明度的菜单，从 0% （完全透明）到 100%（完全不透明）。
实现透明的css方法通常有以下3种方式，以下是不透明度都为80%的写法
css3的，x 的取值从 0 到 1，如opacity: 0.8
css3的，alpha的取值从 0 到 1，如rgba(255,255,255,0.8)
IE专属滤镜&filter:Alpha(opacity=x)，x 的取值从 0 到 100，如filter:Alpha(opacity=80)
css3的opacity
兼容性：IE6、7、8不支持，IE9及以上版本和标准浏览器都支持
使用说明：设置opacity元素的所有后代元素会随着一起具有透明性，一般用于调整图片或者模块的整体不透明度
&!DOCTYPE html&
&meta charset="utf-8"&
&title&opacity&/title&
padding: 0;
margin: 0;
padding: 50px;
background: url(img/bg.png) 0 0 repeat;
padding: 25px;
background-color:#000000;
opacity: 0.2;
color: #FFFFFF;
&div class="demo"&
&p&背景透明，文字也透明&/p&
使用opacity后整个模块都透明了，展现如下：
那么使用opacity实现《背景透明，文字不透明》是不可取的。
css3的rgba
兼容性：IE6、7、8不支持，IE9及以上版本和标准浏览器都支持
使用说明：设置颜色的不透明度，一般用于调整background-color、color、box-shadow等的不透明度。
&!DOCTYPE html&
&meta charset="utf-8"&
&title&css3的rgba&/title&
padding: 0;
margin: 0;
padding: 50px;
background: url(img/bg.png) 0 0 repeat;
padding: 25px;
background-color:#000000;/* IE6和部分IE7内核的浏览器(如QQ浏览器)下颜色被覆盖 */
background-color:rgba(0,0,0,0.2); /* IE6和部分IE7内核的浏览器(如QQ浏览器)会读懂，但解析为透明 */
color: #FFFFFF;
&div class="demo"&
&p&背景透明，文字也透明&/p&
在background-color中使用rgba，标准浏览器中，背景透明，文字不透明，展现如下：
很奇葩的是，IE6和部分IE7内核的浏览器(如QQ浏览器)会读懂rgba，解析后颜色为透明，其实应该是null
那么使用opacity实现背景透明，文字不透明是可取的。
IE专属滤镜&filter:Alpha(opacity=x)
使用说明：IE浏览器专属，问题多多，本文以设置背景透明为例子，如下：
仅支持IE6、7、8、9，在IE10版本被废除
在IE6、7中，需要激活IE的haslayout属性(如：*zoom:1或者*overflow:hidden)，让它读懂filter:Alpha
在IE6、7、8中，设置了filter:Alpha的元素，父元素设置position:static(默认属性)，其子元素为相对定位，可让子元素不透明
&!DOCTYPE html&
&meta charset="utf-8"&
&title&opacity&/title&
padding: 0;
margin: 0;
padding: 50px;
background: url(img/bg.png) 0 0 repeat;
padding: 25px;
background: #000000;
filter:Alpha(opacity=50);/* 只支持IE6、7、8、9 */
position:static; /* IE6、7、8只能设置position:static(默认属性) ，否则会导致子元素继承Alpha值 */
*zoom:1; /* 激活IE6、7的haslayout属性，让它读懂Alpha */
color: #FFFFFF;
position: relative;/* 设置子元素为相对定位，可让子元素不继承Alpha值，保证字体颜色不透明 */
&div class="demo"&
&p&背景透明，文字不透明&/p&
全兼容的方案
上以上3点分析可知，设置透明背景文字不透明，可采用的属性有rgba和IE的专属滤镜filter:Alpha，其兼容性如下图所示：
针对IE6、7、8浏览器，我们可以采用fiter:Alpha，针对标准浏览器我们采用rgba，那么问题来了，IE9浏览器2个属性都支持，一起使用会重复降低不透明度...
那么，如何只对IE6、7、8使用fiter:Alpha如何实现呢？2年前写过《》一文，最新我也做了点更新，里面有IE的相关hack，找到只支持IE 6、7、8的方案，如下：
/* 只支持IE6、7、8 */
@media \0screen\,screen\9 {...}
ok，所有问题都解决了，全部代码如下：
&!DOCTYPE html&
&meta charset="utf-8"&
&title&背景透明，文字不透明&/title&
padding: 0;
margin: 0;
padding: 50px;
background: url(img/bg.png) 0 0 repeat;
padding: 25px;
background-color: rgba(0,0,0,0.5);/* IE9、标准浏览器、IE6和部分IE7内核的浏览器(如QQ浏览器)会读懂 */
color: #FFFFFF;
@media \0screen\,screen\9 {/* 只支持IE6、7、8 */
background-color:#000000;
filter:Alpha(opacity=50);
position:static; /* IE6、7、8只能设置position:static(默认属性) ，否则会导致子元素继承Alpha值 */
*zoom:1; /* 激活IE6、7的haslayout属性，让它读懂Alpha */
position: relative;/* 设置子元素为相对定位，可让子元素不继承Alpha值 */
&div class="demo"&
&p&背景透明，文字不透明&/p&
可能很多同学会觉得很复杂，为什么不直接用两个DIV放在同一个位置就行了，一个不透明DIV，一个文字DIV，很简单的解决问题，这也是好个方法，但是需要写绝对定位或负margin，并出现空内容的DIV，而且这是这种方法在有些场景下也会显得复杂，如下示例，鼠标经过商标后展现展现透明的提示文案，就需要控制2个DIV啦~
一点思路，如果疑问，欢迎大家留言交流~
阅读(...) 评论()
朋友同事同行大神帮忙，如何设置名为2的背景图片的透明度_html吧_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：83,919贴子：
大神帮忙，如何设置名为2的背景图片的透明度收藏
&style type=&text/css&&&!--.STYLE1 { font-size: 24 color: #0000FF;}body { background-image: url(2.jpg);
}.STYLE2 { font-size: 24 font-weight: color: #0000FF;}--&&/style&
html培训,千锋Html5培训,名企内部推荐就业,面对面教学模式,成就高薪互联网工程师!html培训,企业级项目实战,总监级名师面授,0基础4个月速成为web开发工程师,高薪就业!
大神快来看看
我用dreamweaver8.0制作的，对代码不是很懂
求解！！！
没人来嘛？
帮顶,求大神
带font的都是设置文本的，你用来设置图片我也是醉了
.2{-webkit-opacity：0.8opacity：0.8；}
obacity：0.6
达内html,20分钟入门,88天精通就业,html总监授课,实战教学.达内html培训学不会免费重学,先就业后付款,本月&html5&公开课——免费试听!
opacity 属性
&!DOCTYPE html&&html&&head&&meta charset=&utf-8& /&&title&&/title&&style type=&text/css&&&!--*{margin:0;padding:0;}#demo_bg{background:url(2.jpg);filter:alpha(opacity=50);opacity:0.5;-webkit-opacity:0.5;-moz-opacity:0.5;-o-opacity:0.5;position:top:0;left:0;z-index:-1;width:100%;height:100%;}.STYLE1,.STYLE2 {font-size: 24color: #00F;}/*body{background-image: url(2.jpg);}*/.STYLE2{font-weight:}--&&/style&&/head&&body&&div id=&demo_bg&&&/div&&div class=&STYLE1&&背景图片&/div&&div class=&STYLE2&&想要更简单的直接ps透明图片吧。在当背景图片!!!&/div&&/body&&/html&
根据你的代码应该加入opacity到body{}里面,具体代码如下body{background:url(2.jpg);padding:0;/*清空内边距,可以再其他地方清空*/margin:0;/*清空外边距,也可以在其他地方清空*/filter:alpha(opacity=80);/*为了兼容IE浏览器6-8*/opacity:0.8;}
登录百度帐号推荐应用
为兴趣而生，贴吧更懂你。或div设置背景图片透明度且字不透明_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
div设置背景图片透明度且字不透明
上传于||暂无简介
阅读已结束，如果下载本文需要使用0下载券
想免费下载更多文档？
定制HR最喜欢的简历
你可能喜欢}