CSS:不透明度只有背景,而不是里面的文字

Question

我有这个注册表格框,我真的很喜欢背景如何获得不透明度,透明度为25%(85),但后来我注意到文本和表单元素也变得暗淡等等,所以我想知道如何做到这一点只有边框和背景而不是盒子里面的东西？

#regForm {
z-index:11;
position: absolute;
top: 120px;
left: 500px;
background: #000;
color: #FFF;
width: 500px;
height: 240px;
border: 6px solid #18110c;
text-align: center;
margin: 40px;
padding: 1px;
  opacity: 0.85;
  -moz-opacity: 0.85; /* older Gecko-based browsers */
  filter:alpha(opacity=85); /* For IE6&7 */

}

Answer 1

简单的方法是将文本移动到单独的div中,就像这样.基本上,您将不透明度应用于单独的div并将文本放在顶部...

<div id="parent">
   <div id="opacity"></div>
   <div id="child">text</div>
</div>

div#parent { position:relative; width:200px; height:200px; }
div#child { position:absolute; width:200px; height:200px; z-index:2; }
div#opacity { position:absolute; width:200px; height:200px; z-index:1; }

另一条路线是rgba.不要忘记有一个单独的css属性来提供IE,因为它不支持该rgba属性.你也可以喂一个透明的png.

#regForm {
   background: rgb(200, 54, 54); /* fallback color */
   background: rgba(200, 54, 54, 0.5);
}

而对于IE ...

<!--[if IE]>

   <style type="text/css">

   .color-block {
       background:transparent;
       filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000050,endColorstr=#99000050);
       zoom: 1;
    } 

    </style>

<![endif]-->

就个人而言,我会选择第一个选项,因为它不那么麻烦.

Answer 2

如果你只是在寻找一个css解决方案,那么RGBA就是你的选择.对于不能使用RGBA的旧浏览器,可以使用纯色作为后备.

.stuff {
  background-color: rgb(55, 55, 55);
  background-color: rgba(55, 55, 55, 0.5);
}

您还可以回退图像:

.stuff2 {
  background: transparent url(background.png);
  background: rgba(0, 0, 0, 0.5) none;
}

以下是在IE的所有邪恶版本中使用它所需的一切:http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer