html透明背景字体不透明,css3背景透明，文字不透明

在平常的工作中，特别是那种弹窗，背景是透明的，而里面的文字是不透明的。平常我们一般都会用到，定义三个层，一个父层相对定位，一个透明层绝对定位，并且要设定一个高度，还有一个层就是内容层，也是用绝对定位。这样相对比较麻烦点。习惯了使用”opacity“，它很简单易用，但是，opacity会使所有的子元素都变成透明的，通过RGBa，我们可以将一个元素设置为透明，而不会影响其子元素

现在用rgba可以很好的解决这个问题。

下面是整个demo的代码：

-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

无标题文档

*{ margin:0; padding:0;}

body{ background:url(pic/4.jpg) no-repeat; width:293px; height:250px;}

.container{background:#000; width:293px;  background:rgba(0,0,0,0.4); filter:alpha(opacity=40); }

.container .sub_con{ position:relative; color:#fff; width:100%;}

流浪是好人，好人，一定是好人

css关键解释：

.container{background:#000; width:293px;  background:rgba(0,0,0,0.4); filter:alpha(opacity=40); }

.container .sub_con{ position:relative; color:#fff; width:100%;}

主要是container里面的background:rgba(0,0,0,0.4)这个0.4就是透明度。可以声明一个保留色彩。这个色彩应该是可靠的——所有的浏览器都支持,但IE不支持rgba，IE可以用平常的filter:alpha(opacity=40)来设置，子级要设置position:relative来脱离文档

查资料知道：

RGBa是一种在CSS中声明包含透明效果的颜色的方法，语法为

div{background:rgba(0,0,0,0.4)}