CSS div背景颜色半透明、内容不透明方法

来源：wordpress 作者： 2020-06-09

前面有发表一篇关于CSS半透明的教程，不过那个是层中的所有内容都跟着半透明了。

今天这次分享层背景颜色半透明，层内的所有内容不透明。兼容IE6/IE7/IE8和火狐浏览器，css用到的/9是css hack的写法，是为了兼容不同的浏览器而使用的

代码如下：

#div {background-color:rgba(255,255,255,0.5); background:#fff/9; filter:alpha(opacity=50);}#div * { position:relative;}

解析：其中的“255,255,255”与“background:#fff”都是背景颜色值，需要修改这两处对应的颜色值。

其中的 "0.5"与"opacity=50"中的50 就是透明度。

温馨提示，255，255，255 为红黄蓝颜色值，推荐一个小工具可以随意获取颜色的红黄蓝颜色值。

FastStone Capture 其中的屏幕取色器可获得颜色值。

实例代码：

复制以下实例代码再粘贴到本站提供的在线运行代码工具里运行查看实例效果！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>兼容ie6,ie7以及firefox的css透明滤镜，文字不继承其透明属性</title><style type="text/css">body {background:url(http://www.16css.com/skin/mb001/images/logo.png) repeat left top} #container{ border:1px solid #c00; background-color:rgba(34,34,34,0.5); background:#222222/9; filter:alpha(opacity=50); width:500px; margin:40px auto; line-height:200%; font-size:14px; padding:14px;} #container *{ position:relative;}</style></head><body> <div id="container">     <span>爱油菜教育资源网原创我说：“我是内容，所以我不会半透明。”</span>    </div></body></html>