我有这个注册表单框，我真的很喜欢背景如何变得不透明度，透明 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 */
}
【问题讨论】：
标签： css
不需要做所有这些事情，比如不需要在 div 上应用位置然后不透明度，这是实现它的非常简单的方法，background: rgba(0, 0, 0, 0.6);
只有你必须使用带有不透明度值的背景颜色。
【讨论】：
您最好的选择可能是使用半透明 PNG 作为背景，或者使用 RGBa 设置背景和边框的颜色。如果您不介意制作灵活宽度容器所需的额外标记，PNG 将很好地工作，但 IE6 也不支持它们（如果这是一个问题）。
RGBa 在浏览器中的实现并不广泛，但如果透明度仅用于视觉效果，那么它是使用一些渐进增强的好地方。
对于 RGBa，您需要添加额外的一行作为后备：
#regForm {
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.5);
border-color: rgb(24, 17, 12);
border-color: rgba(24, 17, 12);
}
任何不能识别 RGBa 声明的浏览器都只会使用纯 RGB。
【讨论】：
简单的方法是将文本移动到单独的 div 中，like so。基本上，您将不透明度应用于单独的 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]-->
我个人会选择第一个选项，因为它不那么麻烦。
【讨论】：
如果您只是在寻找 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
【讨论】：
做不到：任何子元素都会继承父元素的不透明度。
我的情况很简单 - 只需使用两个 divs。将背景图像放在一张并应用不透明度，然后将内容放入第二张。使用position: absolute 和z-index 将它们放在一起。
【讨论】：