下载文档原格式
css中div透明度有⼏种⽅法设置？css设置div背景透明有两种⽅法：第⼀种使⽤opacity：0~1，这个⽅法有个缺点，就是内容也会跟着透明；第⼆种⽅法就是rgba(0,0,0,0~1)，使⽤这个⽅法就只会设置div背景透明，⽽不会影响到div⾥的内容。
⼀、css rgba()设置颜⾊透明度语法：rgba（R,G,B,A）;RGBA 是代表Red（红⾊） Green（绿⾊） Blue（蓝⾊）和 Alpha（不透明度）三个单词的缩写。
RGBA 颜⾊值是 RGB 颜⾊值的扩展，带有⼀个 alpha 通道 - 它规定了对象的不透明度。
rgba（)⾥的值的介绍：R：红⾊值。
正整数（0~255）G：绿⾊值。
正整数（0~255）B：蓝⾊值。
正整数（0~255）A：透明度。
取值0~1之间rgba()只是单纯的可以设置颜⾊透明度，这样在页⾯的布局中有很多应⽤。
⽐如说：让背景出现透明效果，但上⾯的⽂字不透明。
代码实例：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>rgba()</title><style>.demo{width: 350px;height: 300px;margin: 50px auto;}.demo *{width: 120px;height: 120px;margin: 10px;float: left;}.demo1{background:rgba(255,0,0,1);}.demo2{background:rgba(255,0,0,0.5);}</style></head><body><div><div>背景⾊不透明，⽂字不透明！</div><div>背景⾊半透明，⽂字不透明！</div></div></body></html>⼆、css opacity属性设置背景透明度语法：opacity: value ;value ：指定不透明度，从0.0（完全透明）到1.0（完全不透明）。
css 背景色透明文字不透明在FF/Chrome 等较新的浏览器中可以使用css属性background-color的rgba轻松实现背景透明，而文字保持不透明。
而IE6/7/8浏览器不支持rgba，只有使用IE的专属滤镜filter:Alpha 来实现，但是这样写法会把文字也变为透明，因此只有在透明容器的子节点（文本节点除外）内设置position:relative才能不继承其父元素的透明滤镜，代码如下：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Web开发者网络- </title><style type="text/css">.warp{ background:#eee url(back.jpg) no-repeat left top; width:440px; height:400px; border:1px solid #ccc;}.content { width:180px; height:260px; margin:0px auto; padding:30px 30px; background:rgba(255, 255, 255, 0.6)!important;filter:Alpha(opacity=60); background:#fff; /*使用IE专属滤镜实现IE背景透明*/ }.content p{ position:relative;} /*实现IE文字不透明*/</style></head><body><div class="warp"><div class="content"><p> 是WEB开发者学习交流必备网站。
html中如何使得改变背景的透明度时，背景上的⽂字透明度不被改变1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"2 "/TR/html4/loose.dtd">3<html>4<head>5<title></title>6<style type="text/css">7 .div1{8 width: 150px;9 height: 150px;10 background-color: #000001;11 text-align: center;12/*透明度*/13 opacity: 0.5;1415 }16 span{17 color: red;18 font-size: 18px;19 padding-top: 60px;20 }21</style>22</head>23<body>24<div class="div1">25<span>不改变⽂字的透明度</span>26</div>27</body>28</html>使⽤opacity改变背景的透明度时，背景上的⽂字的透明度也会发⽣改变。
为了使⽂字的颜⾊不发⽣改变，我们使⽤background-color: rgba(); background-color: rgba(a,b,c,a);三个参数依次为（R G B 透明度）的参数1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"2 "/TR/html4/loose.dtd">3<html>4<head>5<title></title>6<style type="text/css">7 .div1{8 width: 150px;9 height: 150px;10 text-align: center;11 background-color: rgba(0,0,1,0.5);1213 }14 span{15 color: red;16 font-size: 18px;17 padding-top: 60px;18 }19</style>20</head>21<body>22<div class="div1">23<span>不改变⽂字的透明度</span>24</div>25</body>26</html>。
CSS实现背景透明半透明效果的⽅法全透明代码:{background:transparent}半透明代码:{filter:alpha(opacity=80);-moz-opacity:0.8;width:auto !important;width:100%}其他的还有不少⽂章，有个不错，如何⽤CSS实现背景半透明效果？内容详细如下： 龙⾏天下精彩内容等着你引⽤如何⽤CSS实现背景半透明效果？做过活动页⾯的同学可能会遇到要做背景半透明的效果，我们⼀般的做法是⽤两个层，⼀个⽤于放⽂字，另⼀个⽤于做透明背景，因为透明滤镜的效果会影响到⾥⾯的内容。
不过如果你只需求在IE下实现，我们有更简单的做法：HTML代码：<div class="alpha1"><div class="ap2"><p>背景为红⾊(#FF0000)，透明度20%。
</p></div></div>CSS代码：.alpha1{width:300px;height:200px;background-color:#FF0000;filter: Alpha(Opacity=30);}.ap2{position:relative;} 这样基本就可以实现啦，也不⽤担⼼定位和⾃适应问题，最⼤的问题是仅IE⽀持。
如果兼容FF、OP怎么写呢？⾸先，上⾯这种定法是不⾏的啦，那就只能⽤两个层重叠的⽅法啦。
改下页⾯结构与CSS样式：HTML代码：<div class="alpha1"><div class="ap2"><p>背景为红⾊(#FF0000)，透明度20%。
</p></div><!--[if IE]><![if !IE]><![endif]--> <div class="alpha2"></div> <!--[if IE]><![endif]><![endif]--></div>CSS代码：.alpha1,.alpha2{width:100%;height:auto;min-height:250px;/* 必需 */_height:250px;/* 必需 */overflow:hidden;background-color:#FF0000;/* 背景⾊ */}.alpha1{filter:alpha(opacity=20); /* IE 透明度20% */}.alpha2{background-color:#FFFFFF;-moz-opacity:0.8; /* Moz + FF 透明度20%*/opacity: 0.8; /* ⽀持CSS3的浏览器（FF 1.5也⽀持）透明度20%*/ }.ap2{position:absolute;}。
设置背景图片透明<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><style>.touming .font{ font-size:14px; color:#FF0}.tm11{position:relative; width:483; height:568;}/*设置背景图片大小和定位*/ .tm22{position:absolute;left:0px;top:0px;width: 483px;height: 568px;}.alpha{filter:alpha(opacity=50);width:483px;} /*设置图片透明*/</style></head><div class="tm11"><img src="green-grassland-under-sky-photo-009.jpg" class="alpha"/><div class="tm22"><br><br>背景图片(背景颜色)透明，字不透明<br>哈哈哈哈哈哈哈哈哈好哈哈哈哈哈哈哈哈哈好哈哈哈哈哈哈哈哈哈好哈哈哈哈哈哈哈哈哈好哈哈哈哈哈哈哈哈哈好哈哈哈哈哈哈哈哈哈好哈哈哈哈哈哈哈哈哈好哈哈哈哈哈哈哈哈哈好哈哈哈哈哈哈哈哈哈好哈哈哈哈哈哈哈哈哈好哈哈哈哈哈哈哈哈哈好哈哈<br><br>sdfsdfsdfsdfsdf<br><br></div></div></body></html>加背景颜色的图片透明<style>.touming{ font-size:14px; background:#F00;/*设置背景颜色透明度*/FILTER:Alpha(opacity=50);}.touming .font{ font-size:14px; color:#FF0}.tm11{position:relative; width:1024; height:768}/*设置背景图片大小和定位*/.tm22{position:absolute;left:0px;top:0px;width: 1002px;height: 304px;}.alpha{filter:alpha(opacity=50);width:400px;} /*设置图片透明*/</style><div class="touming center w1024"><div class="tm11"><img src="04s.jpg" class="alpha"/><div class="tm22"><font color="yellow"><br><br>背景图片(背景颜色)透明，字不透明<br> 哈哈哈哈哈哈哈哈哈好哈哈哈哈哈哈哈哈哈好哈哈哈哈哈哈哈哈哈好哈哈哈哈哈哈哈哈哈好哈哈哈哈哈哈哈哈哈好哈哈哈哈哈哈哈哈哈好哈哈哈哈哈哈哈哈哈好哈哈哈哈哈哈哈哈哈好哈哈哈哈哈哈哈哈哈好哈哈哈哈哈哈哈哈哈好哈哈哈哈哈哈哈哈哈好哈哈</font><br> <br>sdfsdfsdfsdfsdf<br><br></div></div></div>。
CSS只改变背景透明度，不改变⼦元素透明度
⼀般情况下，我们可以使⽤css的opcity属性改变某个元素的透明度，但是其元素下的⼦元素的透明度也会被改变，即使对⼦元素重新定义也没有⽤，例如：
Html代码
1. <div style="opacity:0.4; background-image:url(...);">
2. <div style="opacity:1.0;">
3. 显⽰⽂字
4. </div>
5. </div>
⽂字元素的透明度也会是0.4。
于是想⼀想，如果有⽅法只改变背景的透明度就能解决此问题了。
⽅法1：使⽤⼀张透明的图⽚做背景可以达成效果，但是有没有更简单的⽅法呢？
⽅法2：使⽤RGBA。
例如：
Html代码
1. <div style="0, 0, 0.4)">
2. <div>
3. 显⽰⽂字
4. </div>
5. </div>。
CSS实现背景图⽚透明⽽⽂字不透明效果的两种⽅法摘要:⽅法⼀(⽑玻璃效果)：背景图 + 伪类 + flite:blur(3px)⽅法⼆(半透明效果)：背景图 + 定位 + background:rgba(255,255,255,0.3)CSS实现背景图⽚透明，⽂字不透明效果的两种⽅法项⽬中经常会⽤到背景图上放⼀些⽂字介绍，这⾥介绍两种技术来实现背景图⽚透明，⽂字不透明效果，记录⼀下，⽅便⽇后学习。
1.⽑玻璃效果：背景图 + 伪类 + flite:blur(3px).demo1{width: 500px;height: 300px;line-height: 50px;text-align: center;}.demo1:before{background: url(http://csssecrets.io/images/tiger.jpg) no-repeat;background-size: cover;width: 500px;height: 300px;content: "";position: absolute;top: 0;left: 0;z-index: -1;/*-1 可以当背景*/-webkit-filter: blur(3px);filter: blur(3px);}<div class="demo1">背景图半透明，⽂字不透明<br />⽅法：背景图+ filter：blur</div>2.半透明效果：背景图 + 定位 + background:rgba(255,255,255,0.3).demo2-bg{background: url(http://csssecrets.io/images/tiger.jpg) no-repeat;background-size: cover;width: 500px;height: 300px;position: relative;}.demo2{position: absolute;left: 0;right: 0;top: 0;bottom: 0;width: 500px;height: 300px;line-height: 50px;text-align: center;background:rgba(255,255,255,0.3);}<div class="demo2-bg"><div class="demo2">背景图半透明，⽂字不透明<br />⽅法：定位+ background:rgba(255,255,255,0.3)</div></div>以上所述是⼩编给⼤家介绍的CSS实现背景图⽚透明⽽⽂字不透明效果的两种⽅法，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。
css背景透明css实现背景透明⽽⽂字不透明平时我们所说的调整透明度，其实就是在样式中调整不透明度，⽽实现透明的css⽅法通常有如下3中⽅式：css3的opacity:x。
x的取值为0到1，如opacity:0.5表⽰不透明度为50%；css3的rgba(red,green,blue,alpha)，alpha的取值为0到1，如rgba(255,255,255,0.5)表⽰不透明度为50%；IE专属滤镜filter:Alpha(opacity=x)，x的取值为0到100，如filter:Alpha(opacity=50)表⽰不透明度为50%css3的opacity兼容性：IE6、7、8都不⽀持，IE9及以上和其他标准的浏览器都⽀持但是使⽤opacity设置元素的不透明度会使其所有后代元素都会随着⼀起具有透明度，⼀般都⽤于调整图⽚或者模块的整体不透明度<!DOCTYPE html><html><head><meta charset="utf-8"><title>opacity</title><style>*{padding: 0;margin: 0;}body{padding: 50px;background-color:#eef ;}.demo{padding: 25px;background-color:#000000;opacity: 0.2;}.demo p{color: #FFFFFF;}</style></head><body><div class="demo"><p>背景透明，⽂字也透明</p></div></html>使⽤后整个模块都会变透明，效果如下：所以只使⽤opacity想是想背景透明，⽂字不透明是不⾏的。
