我通常在工作中使用这门课。很好。

.透明{过滤器：alpha（不透明度=50）；/*Internet Explorer*/-khtml不透明度：0.5；/*KHTML和旧Safari*/-moz不透明度：0.5；/*Firefox和Netscape*/不透明度：0.5；/*Firefox、Safari和Opera*/}

有一个技巧可以最小化标记：使用伪元素作为背景，可以在不影响主元素及其子元素的情况下设置其不透明度：

DEMO

输出：

相关代码：

p型{位置：相对；}p： 之后{内容：“”；位置：绝对；顶部：0；左：0；宽度：100%；高度：100%；背景：#fff；-ms filter：“progid:DXImageTransform.Microsoft.Alpha（不透明度=50）”；不透明度：.6；z指数：-1；}/***以下仅适用于演示样式***/正文{背景：url（'http://i.imgur.com/k8BtMvj.jpg'）不重复；背景尺寸：封面；}p型{宽度：50%；填充：1em；保证金：10%自动；字体系列：arial，serif；颜色：#000；}国际货币基金组织{显示：块；最大宽度：90%；边距：.6em自动；}<p>Lorem ipsum dolor坐amet，consectetur adipiscing elit。不要用舌头骚扰。<img src=“http://i.imgur.com/hPLqUtN.jpg“alt=”“/></p>

浏览器支持Internet Explorer 8和更高版本。

伪元素不透明度

使用半透明PNG或SVG图像或使用CSS：

background-color: rgba(255, 0, 0, 0.5);

这是一篇来自css3.info、Opacity、RGBA和妥协（2007-06-03）的文章。

注意，一旦底层背景穿透，文本仍然需要与背景形成足够的对比。

<p style=“背景色：rgba（255，0，0，0.5）；”><span>你好，世界</span></p>

不久前，我在Cross Browser Background Transparency With CSS中写到了这一点。

奇怪的是，InternetExplorer6将允许您使背景透明，并使顶部的文本完全不透明。对于其他浏览器，我建议使用透明的PNG文件。

几乎所有这些答案都假设设计师想要纯色背景。如果设计师实际上想要一张照片作为背景，那么目前唯一真正的解决方案就是JavaScript，就像其他地方提到的jQueryTransify插件一样。

我们需要做的是加入CSS工作组讨论，让他们给我们一个背景不透明度属性！它应该与多背景功能一起工作。

该方法允许您在背景中显示图像，而不仅仅是纯色，还可以用于在其他属性（如边界）上显示透明度。不需要透明PNG图像。

在CSS中使用：before（或：after），并赋予它们不透明度值，使元素保持其原始不透明度。因此，您可以使用：before来创建一个人造元素，并为其提供所需的透明背景（或边框），然后将其移动到您希望使用z索引保持不透明的内容后面。

一个例子（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财产（本例中为红色背景，但可以是图像或边框）。它被定位为绝对的，以便将其移到.faceyBg后面（使用零值或更适合您需要的任何值）。