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

这里有一个jQuery插件Transify（Transify-一个jQueryplugin，可以轻松地将透明度/不透明度应用于元素的背景），它可以为您处理所有事情。

我时不时地遇到这个问题，所以我决定写一些能让生活更轻松的东西。该脚本小于2KB，只需要一行代码就可以运行，如果您愿意，它还可以处理背景的不透明度动画。

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

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

最简单的方法是使用半透明背景PNG图像。

如果需要，可以使用JavaScript使其在InternetExplorer6中工作。

我使用Internet Explorer 6中透明PNG中概述的方法。

除此之外，您可以使用两个并排的兄弟元素来伪装它-使一个半透明，然后将另一个绝对放置在顶部。

我认为这将为您提供所需的输出：

div {
  width: 200px;
  height: 200px;
  display: block;
  position: relative;
}

div::after {
  content: "";
  background: url(image.jpg);
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}

该方法允许您在背景中显示图像，而不仅仅是纯色，还可以用于在其他属性（如边界）上显示透明度。不需要透明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后面（使用零值或更适合您需要的任何值）。