如何使用CSS为文本或图像提供透明背景？
是否有可能，仅使用CSS，使元素的background半透明，但使元素的内容(文本和图像)不透明？
我希望在不将文本和背景作为两个单独的元素的情况下实现这一点。
尝试时：
p {
position: absolute;
background-color: green;
filter: alpha(opacity=60);
opacity: 0.6;
}
span {
color: white;
filter: alpha(opacity=100);
opacity: 1;
}<p>
<span>Hello world</span>
</p>
看起来子元素受制于其父元素的不透明度，因此opacity:1是相对于父元素的opacity:0.6的。
回答 18
Stack Overflow用户
发布于 2010-07-14 04:51:05
这是我能想到的最好的解决方案，而不是使用CSS3。据我所知，它在Firefox，Chrome和Internet Explorer上运行得很好。
将一个容器div和两个子div放在同一级别，一个用于内容，一个用于背景。使用CSS，自动调整背景大小以适合内容，并使用z-index将背景实际放在后面。
.container {
position: relative;
}
.content {
position: relative;
color: White;
z-index: 5;
}
.background {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: Black;
z-index: 1;
/* These three lines are for transparency in all browsers. */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
opacity: .5;
}<div class="container">
<div class="content">
Here is the content.
<br/>Background should grow to fit.
</div>
<div class="background"></div>
</div>
Stack Overflow用户
发布于 2012-01-14 08:14:59
此方法允许您在背景中具有图像，而不仅仅是纯色，并且可以用于在其他属性上具有透明度，例如边框。不需要透明的PNG图像。
在CSS中使用:before (或:after)，并为它们提供不透明度值，以使元素保持原始不透明度。因此，您可以使用:before来创建一个人造元素，并为其提供所需的透明背景(或边框)，然后将其移动到您希望使用z-index保持不透明的内容后面。
一个示例(fiddle) (请注意，带有dad类的DIV只是为了提供一些上下文和颜色的对比度，实际上并不需要这个额外的元素，红色矩形向下和向右移动了一点，以使fancyBg元素后面的背景可见)：
<div class="dad">
<div class="fancyBg">
Test text that should have solid text color lets see if we can manage it without extra elements
</div>
</div>使用此CSS：
.dad {
background: lime; border: 1px double black; margin: 1ex 2ex;
padding: 0.5ex; position: relative; -k-z-index: 5;
}
.fancyBg {
border: 1px dashed black; position: relative; color: white; font-weight: bold;
z-index: 0; /*background: black;*/
}
.fancyBg:before {content:'-'; display: block;
position: absolute; background: red; opacity: .5;
top: 2ex; right: -2ex; bottom: -2ex; left: 2ex;
/*top: 0; right: 0; bottom: 0; left: 0;*/
z-index: -1;
}在本例中，.fancyBg:before具有您希望具有透明度的CSS属性(本例中为红色背景，但可以是图像或边框)。它被定位为绝对的，以将其移动到.fancyBg之后(使用零值或任何更适合您需要的值)。
Stack Overflow用户
发布于 2011-01-27 00:36:17
几乎所有这些答案都假设设计师想要纯色背景。如果设计师真的想要一张照片作为背景，目前唯一真正的解决方案是JavaScript，就像jQuery转换插件mentioned elsewhere一样。
我们需要做的是加入CSS工作组的讨论，让他们给我们一个背景-不透明属性！它应该与多背景功能协同工作。
https://stackoverflow.com/questions/806000
复制相似问题
腾讯云开发者
