使用半透明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>

如果你使用的是Less，你可以使用褪色（颜色，30%）。

对于简单的半透明背景色，上述解决方案（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>

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

如果你是一个Photoshop爱好者，你也可以使用：

 #some-element {
  background-color: hsla(170, 50%, 45%, 0.9); // **0.9 is the opacity range from 0 - 1**
 }

Or:

#some-element {
  background-color: rgba(170, 190, 45, 0.9); // **0.9 is the opacity range from 0 - 1**
}

当使用#AARGGBB格式时，它对我有效，因此对我有效的格式是#1C00ff00。试试看，因为我看到它对某些人有效，而对其他人无效。我在CSS中使用它。

这给出了所需的结果-

body {
    background-image: url("\images\dark-cloud.jpg");
    background-size: 100% 100%;
    background-attachment: fixed;
    opacity: .8;
}

设置背景的不透明度。