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

不透明度的背景，但不是文本有一些想法。要么使用半透明图像，要么覆盖其他元素。

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

可以使用附加到十六进制值的不透明度值：

background-color: #11ffeeaa;

在本例中，aa是不透明度。不透明度为00表示透明，ff表示纯色。

不透明度是可选的，因此可以一如既往地使用十六进制值：

background-color: #11ffee;

您也可以使用rgba（）的旧方法：

background-color: rgba(117, 190, 218, 0.5);

如果您想确保背景没有其他样式，如图像或渐变，请使用背景速记：

background: #11ffeeaa;

根据Mozilla规范(https://developer.mozilla.org/en-US/docs/Web/CSS/background-color):

/* Keyword values */
background-color: red;
background-color: indigo;

/* Hexadecimal value */
background-color: #bbff00;    /* Fully opaque */
background-color: #bf0;       /* Fully opaque shorthand */
background-color: #11ffee00;  /* Fully transparent */
background-color: #1fe0;      /* Fully transparent shorthand  */
background-color: #11ffeeff;  /* Fully opaque */
background-color: #1fef;      /* Fully opaque shorthand  */

/* RGB value */
background-color: rgb(255, 255, 128);        /* Fully opaque */
background-color: rgba(117, 190, 218, 0.5);  /* 50% transparent */

/* HSL value */
background-color: hsl(50, 33%, 25%);         /* Fully opaque */
background-color: hsla(50, 33%, 25%, 0.75);  /* 75% transparent */

/* Special keyword values */
background-color: currentcolor;
background-color: transparent;

/* Global values */
background-color: inherit;
background-color: initial;
background-color: unset;

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

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

我是这样做的（这可能不是最佳的，但它有效）：

创建要半透明的div。给它一个类/id。将其留空，然后将其关闭。为其设置高度和宽度（例如，300像素乘300像素）。给它一个0.5的不透明度或任何你喜欢的颜色，以及一个背景色。

然后，在该div的正下方，创建另一个具有不同类/id的div。在其中创建一个段落，在其中放置文本。给出div位置：relative，top：-295px（即负295像素）。给它一个z索引为2，以便于度量，并确保它的不透明度为1。根据您的喜好设置段落的样式，但要确保尺寸小于第一个div的尺寸，这样它就不会溢出。

就是这样。代码如下：

.反式{不透明度：0.5；高度：300px；宽度：300px；背景色：橙色；}.变速器2{不透明度：1；位置：相对；顶部：-295px；}.变速器2 p{宽度：295px；颜色：黑色；字号：粗体；}<body><div class=“trans”></div><div class=“trans2”><p>文本文本文本</p></div></body>

这在Safari2.x中有效，但我不了解Internet Explorer。