首页 / CSS / css如何实现背景透明，文字不透明？
css如何实现背景透明，文字不透明？
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了css如何实现背景透明，文字不透明？，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2778字，纯文字阅读大概需要4分钟。
内容图文
之前做了个半透明弹层，但设置背景半透明时，子元素包含的字体及其它元素也都变成了半透明。对opacity这个属性认识的不透彻，在这里做一些总结，方便以后使用。
? 背景透明，文字不透明的解决方法：http://github.crmeb.net/u/defu ?- 为元素添加一个绝对定位的子元素，设置大小和该元素一样，把半透明加在绝对定位元素上作为遮罩，z-index设置到最底部，达到背景半透明效果。
- 使用CSS3新属性rgba。
- css3的opacity，取值从 0 到 1，如opacity : 0.5，IE9及以上版本和标准浏览器都支持。IE8 以及更早的版本支持替代的 filter 属性，例如：filter : Alpha(opacity=50)。
- css3的rgba(red, green, blue, alpha)，alpha的取值从 0 到 1，如background-color : rgba(255,255,255,0.5)。
<div style="width:150px;height:100px;float:left;"><div>没有设置透明度</div></div> <div style="width:150px;height:100px;float:left;margin-left:10px;opacity:0.5;"><div>用opacity设置透明度</div></div> <div style="width:150px;height:100px;float:left;margin-left:10px;"><div>用rgba设置透明度</div></div> <div style="width:150px;height:100px;float:left;margin-left:10px;filter:Alpha(opacity=50);"><div>IE专属filter设置透明度</div></div>
? ? ? ??
? ? ? ??- 仅支持IE6、7、8、9，在IE10版本被废除。
?
- 在IE6、7中，需要激活IE的haslayout属性(如：*zoom:1或者*overflow:hidden)，让它读懂filter:Alpha。
- 在IE6、7、8中，设置了filter:Alpha的元素，父元素设置position : static(默认属性)，其子元素为相对定位position : relative，可让子元素不透明。
? ? ?
?
全兼容：
| IE6 | IE7 | IE8 | IE9 | 标准浏览器 | |
| rgba | ? | ? | ? | ? | ? |
| filter : Alpha | ? | ? | ? | ? | ? |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景透明，文字不透明</title>
<style>
*{
padding: 0;
margin: 0;
}
body{
background-color: #ff7a74;
padding: 100px;
}
.test-opacity{
padding: 25px;
background-color: rgba(255,255,255,0.5);/* IE9、标准浏览器、IE6和部分IE7内核的浏览器(如QQ浏览器)会读懂 */
}
/* 只支持IE6、7、8 */
@media \0screen\,screen\9 {
.test-opacity{
background-color: #fff;
filter: Alpha(opacity=50);
*zoom:1;/* 激活IE6、7的haslayout属性，让它读懂Alpha */
}
.test-opacity p{
position: relative;/* 设置子元素为相对定位，可让子元素不继承Alpha值 */
}
}
</style>
<body>
<div class="test-opacity">
<p>背景透明，文字不透明</p>
</div>
</body>
</html>
内容总结
以上是互联网集市为您收集整理的css如何实现背景透明，文字不透明？全部内容，希望文章能够帮你解决css如何实现背景透明，文字不透明？所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】