CSS：不透明只有背景，而不是里面的文字
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3382878/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS: opacity only background, not the text inside
提问by Karem
I have this registration form box, and i really like how the background gets opacity, transparent with 25% (85), but then i notice that the text and the form elements also gets darkened alittle and such, so i wonder how to do this only with the border and background and not with the stuff inside the box?
我有这个注册表单框，我真的很喜欢背景如何变得不透明，透明 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 */
}
采纳答案by meder omuraliev
The easy way would be to move the text into a separate div, like so. Basically you apply the opacity to a separate div and position the text on top...
简单的方法是将文本移动到一个单独的 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; }
The other route would be rgba. Don't forget there's a separate css property to feed IE since it doesn't support the rgbaproperty. You can also feed a transparent png.
另一条路线是rgba。不要忘记有一个单独的 css 属性来提供给 IE，因为它不支持该rgba属性。您还可以提供透明的 png。
#regForm {
background: rgb(200, 54, 54); /* fallback color */
background: rgba(200, 54, 54, 0.5);
}
And for IE...
而对于 IE...
<!--[if IE]>
<style type="text/css">
.color-block {
background:transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000050,endColorstr=#99000050);
zoom: 1;
}
</style>
<![endif]-->
Personally I'd go with the first option because it's less of a hassle.
我个人会选择第一个选项，因为它不那么麻烦。
回答by adamse
RGBA is the way to go if you're only looking for a css solution. It is possible to use a solid colour as fallback for the old browsers which can't use RGBA.
如果您只是在寻找 css 解决方案，RGBA 是您要走的路。对于不能使用 RGBA 的旧浏览器，可以使用纯色作为后备。
.stuff {
background-color: rgb(55, 55, 55);
background-color: rgba(55, 55, 55, 0.5);
}
You can also fallback on an image:
您还可以回退图像：
.stuff2 {
background: transparent url(background.png);
background: rgba(0, 0, 0, 0.5) none;
}
Here is all you need for getting this to work in all evil versions of IE: http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer
这是让它在所有邪恶版本的 IE 中工作所需的全部内容：http: //kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer
回答by derekerdmann
Your best bet will probably be to use semi-transparent PNGs for your background, or to set the colors for the background and border using RGBa. PNGs will work well if you don't mind the extra markup you'll need to make a flexible-width container, but they also aren't supported in IE6 (if that's a concern).
您最好的选择可能是为您的背景使用半透明的 PNG，或者使用 RGBa 设置背景和边框的颜色。如果您不介意制作宽度灵活的容器所需的额外标记，PNG 将运行良好，但它们在 IE6 中也不支持（如果这是一个问题）。
RGBa is less widely-implemented across browsers, but if the transparency is only used for visual flair, then it's a good place to use some progressive enhancement.
RGBa 在浏览器中的实现不太广泛，但如果透明度仅用于视觉风格，那么它是使用一些渐进增强的好地方。
For RGBa, you'll need to add an extra line as a fallback:
对于 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);
}
Any browser that doesn't recognize the RGBa declaration will simply use the plain RGB.
任何无法识别 RGBa 声明的浏览器都将简单地使用纯 RGB。
回答by Sumit
No need to do all those stuff like no need to apply positions on a div then opacity, here is very simple way to achieve it, background: rgba(0, 0, 0, 0.6);
不需要做所有这些事情，比如不需要在 div 上应用位置然后不透明度，这是实现它的非常简单的方法， background: rgba(0, 0, 0, 0.6);
only you have to use background color with opacity value.
只有您必须使用具有不透明度值的背景颜色。
回答by Pekka
Cant't be done: Any child elements will inherit the parent's opacity.
无法完成：任何子元素都将继承父元素的不透明度。
I your case it's easy though - just use two divs. Have the background image in one and apply the opacity, and put the content into the second one. Use position: absoluteand z-indexto place them on top of each other.
我你的情况虽然很容易 - 只需使用两个divs。将背景图像放在一张中并应用不透明度，并将内容放入第二张。使用position: absolute和z-index将它们放在一起。
