CSS 背景颜色的不透明度，但不是文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/637921/
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
Opacity of background-color, but not the text
提问by Nir
How do I make the cross-browser (including Internet Explorer 6) transparency for the background of a divwhile the text remains opaque?
如何使跨浏览器（包括 Internet Explorer 6）的背景透明，div而文本仍然不透明？
I need to do it without using any library such as jQuery, etc. (But if you know of a library that does it I'd love to know so I can look at their code).
我需要在不使用任何库（例如 jQuery 等）的情况下执行此操作（但如果您知道一个可以执行此操作的库，我很想知道，以便我可以查看他们的代码）。
回答by Austin Adams
Use rgba!
使用RGBA！
.alpha60 {
/* Fallback for web browsers that don't support RGBa */
background-color: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
background-color: rgba(0, 0, 0, 0.6);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}
In addition to this, you have to declare
background: transparentfor IE web browsers, preferably served via conditional comments or similar!
除此之外，您必须
background: transparent为 IE 网络浏览器声明，最好通过条件注释或类似方式提供服务！
回答by Can Berk Güder
回答by Davy Landman
I've created that effect on my blog Landman Code.
我在我的博客Landman Code上创造了这种效果。
What I did was
我所做的是
#Header {
position: relative;
}
#Header H1 {
font-size: 3em;
color: #00FF00;
margin:0;
padding:0;
}
#Header H2 {
font-size: 1.5em;
color: #FFFF00;
margin:0;
padding:0;
}
#Header .Background {
background: #557700;
filter: alpha(opacity=30);
filter: progid: DXImageTransform.Microsoft.Alpha(opacity=30);
-moz-opacity: 0.30;
opacity: 0.3;
zoom: 1;
}
#Header .Background * {
visibility: hidden; // hide the faded text
}
#Header .Foreground {
position: absolute; // position on top of the background div
left: 0;
top: 0;
}<div id="Header">
<div class="Background">
<h1>Title</h1>
<h2>Subtitle</h2>
</div>
<div class="Foreground">
<h1>Title</h1>
<h2>Subtitle</h2>
</div>
</div>The important thing that every padding/margin and content must be the same in both the .Background as .Foreground.
重要的是每个填充/边距和内容在 .Background 和 .Foreground 中都必须相同。
回答by brillout
Relaxing your requirement to work on IE6 and legacy browsers you can use ::before and display: inline-block
放宽您在 IE6 和旧浏览器上工作的要求，您可以使用 ::before 和 display: inline-block
div
{
display: inline-block;
position: relative;
}
div::before
{
content: "";
display: block;
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
background:red;
opacity: .2;
}
Demo at http://jsfiddle.net/KVyFH/172/?
演示在http://jsfiddle.net/KVyFH/172/？
It will work on any modern browser
它适用于任何现代浏览器
回答by Slawa
Thanks @davy-landmann for https://stackoverflow.com/a/638064/417153. That's what I was looking for! Same effect with LESS code:
感谢 @davy-landmann 提供https://stackoverflow.com/a/638064/417153。这就是我要找的！与 LESS 代码相同的效果：
@searchResultMinHeight = 200px;
.searchResult {
min-height: @searchResultMinHeight;
position: relative;
.innerTrans {
background: white;
.opacity(0.5);
min-height: @searchResultMinHeight;
}
.innerBody {
padding: 0.5em;
position: absolute;
top: 0;
}
}
