由于很多人会来到这里，想知道如何调整任何元素（而不仅仅是背景）的不透明度，所以只需在该元素的CSS中添加不透明度：0.2（或您希望的0到1之间的任何数字）即可。

实例

.myclass {
  color: #eb4746;
  opacity: 0.2;
}

这可以用于背景、标题、段落等。

这给出了所需的结果-

body {
    background-image: url("\images\dark-cloud.jpg");
    background-size: 100% 100%;
    background-attachment: fixed;
    opacity: .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>

对于简单的半透明背景色，上述解决方案（CSS3或bg图像）是最佳选择。然而，如果你想做一些更有趣的事情（例如动画、多背景等），或者如果你不想依赖CSS3，你可以尝试“窗格技术”：

.pane, .pane > .back, .pane > .cont { display: block; }

.pane {
    position: relative;
}

.pane > .back {
    position: absolute;
    width: 100%; height: 100%;
    top: auto; bottom: auto; left: auto; right: auto;
}

.pane > .cont {
    position: relative;
    z-index: 10;
}

<p class="pane">
    <span class="back" style="background-color: green; opacity: 0.6;"></span>
    <span class="cont" style="color: white;">Hello world</span>
</p>

该技术通过在外窗格元素内部使用两个“层”来工作：

一个（“背面”）适合窗格元素的大小而不影响内容流，一个（“cont”）包含内容并帮助确定窗格的大小。

位置：窗格上的相对位置很重要；它告诉后层适合窗格的大小。（如果您需要＜p＞标记是绝对的，请将窗格从＜p＞更改为＜span＞，并将所有内容包装在绝对位置＜p＞标签中。）

与上面列出的类似技术相比，该技术的主要优点是窗格不必是指定的大小；如上所述，它将适合全宽度（正常的块元素布局），并且仅与内容一样高。外部窗格元素可以任意调整大小，只要它是矩形（即内联块可以工作；普通的旧内联块不能工作）。

此外，它给了你很多背景的自由；你可以自由地在back元素中放置任何内容，并且不影响内容流（如果你想要多个全尺寸的子层，只需确保它们也具有位置：绝对，宽度/高度：100%，顶部/底部/左侧/右侧：自动）。

允许背景插入调整（通过上/下/左/右）和/或背景固定（通过移除左/右或上/下对中的一个）的一种变体是使用以下CSS：

.pane > .back {
    position: absolute;
    width: auto; height: auto;
    top: 0px; bottom: 0px; left: 0px; right: 0px;
}

如前所述，这在Firefox、Safari、Chrome、IE8+和Opera中都适用，尽管IE7和IE6需要额外的CSS和表达式，IIRC，上次我检查时，第二个CSS变体在Opera中不适用。

注意事项：

控制层内的浮动元素将不包含在内。你需要确保它们被清除或以其他方式控制，否则它们会从底部滑出。窗格元素上有边距，cont元素上有填充。不要使用相反的方式（控件上的边距或窗格上的填充），否则你会发现奇怪的地方，比如页面总是比浏览器窗口略宽。如前所述，整个过程需要是块或内联块。请随意使用＜div＞s而不是＜span＞s来简化CSS。

一个更完整的演示，通过与display:inline块以及自动和特定宽度/最小高度一起使用，展示了该技术的灵活性：

.pane，.pane>.back，.pane>.cont｛display:block；｝.窗格{位置：相对；宽度：175px；最小高度：100px；边距：8px；}窗格>.back{位置：绝对；z指数：1；宽度：自动；高度：自动；顶部：8px；底部：8px；左：8px；右：8px；}窗格>续{位置：相对；z指数：10；}.debug_read｛background:rgba（255，0，0，0.5）；border:1px实心rgba（255,0，0，0.75）；｝.debug_green｛background:rgba（0，255，0，0.5）；border:1px实心rgba（0255，0，0.75）；｝.debug_blue｛background:rgba（0，0，255，0.5）；border:1px实心rgba（1，0，2550.75）；｝<p class=“pane-debug_blue”style=“float:left；”><span class=“back-debug_green”></span><span class=“cont debug_red”>窗格内容<br/>窗格内容。</span></p><p class=“pane-debug_blue”style=“float:left；”><span class=“back-debug_green”></span><span class=“cont debug_red”>窗格内容<br/>窗格内容<br/>窗格内容<br/>窗格内容<br/>窗格内容<br/>窗格内容<br/>窗格内容<br/>窗格内容<br/>窗格内容。</span></p><p class=“pane-debug_blue”style=“float:left；display：内联块；width:auto；”><span class=“back-debug_green”></span><span class=“cont debug_red”>窗格内容<br/>窗格内容。</span></p><p class=“pane-debug_blue”style=“float:left；显示：内联块；宽度：auto；最小高度：auto”><span class=“back-debug_green”></span><span class=“cont debug_red”>窗格内容<br/>窗格内容。</span></p>

下面是广泛使用的技术的现场演示：

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

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

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

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和更高版本。

伪元素不透明度