如何使用CSS为文本或图像提供透明背景？

仅使用CSS，是否可以使元素的背景半透明，但元素的内容（文本和图像）不透明？

我想在不将文本和背景作为两个独立元素的情况下完成这一点。

尝试时：

p型{位置：绝对；背景色：绿色；过滤器：alpha（不透明度=60）；不透明度：0.6；}跨度{颜色：白色；过滤器：alpha（不透明度=100）；不透明度：1；}你好，世界

看起来子元素受到其父元素的不透明度的影响，因此不透明度：1相对于父元素的不可见性：0.6。

当前回答

对于简单的半透明背景色，上述解决方案（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）；｝窗格内容 窗格内容。窗格内容 窗格内容 窗格内容 窗格内容 窗格内容 窗格内容 窗格内容 窗格内容 窗格内容。窗格内容 窗格内容。窗格内容 窗格内容。

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

2010-05-24 16:07:51

其他回答

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

创建要半透明的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”>文本文本文本</div></body>

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

2009-08-04 22:07:55

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

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

2009-04-30 09:52:06

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

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

2011-01-26 16:36:16

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

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

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

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