CSS - 低不透明度div上的不透明文本？

Posted 2023-03-06

【中文标题】CSS - 低不透明度div上的不透明文本？

【英文标题】：CSS - Opaque text on low opacity div?

【发布时间】：2011-01-25 00:12:48

【问题描述】：

我有一个不透明度为 60% 的 div，用于在 div 后面显示部分背景图像。由于不透明度为 60%，该 div 中的文本显示为灰色。

有没有办法覆盖这个级别并使文本显示为黑色？

任何建议表示赞赏。

谢谢。

【参考方案1】：

在背景而不是元素上设置不透明度。

background-color: rgba(255,0,0,0.6);

前段时间我写过如何achieve this in a backwards compatible way。

【讨论】：

IE7 和 IE8 是否支持透明 PNG？

@RohitTigga — 我们怎么知道？我们看不到你做了什么，所以我们无法判断你做错了什么。您应该ask a new question，包括minimal reproducible example，并在其中引用此答案。

这是我的进度。但是，我不确定为什么当我通过背景图像设置不透明度时它不会改变。 jsfiddle.net/RohitTigga/akz5zng7/1

【参考方案2】：

我过去曾在自己的网站上对此进行过试验。到目前为止，实现您想要的最简单的方法是创建一个单像素 .PNG 图像，其不透明度设置为小于 100%（即部分透明）并将其用作背景图像。默认情况下，它将填充整个包含元素 - 如果没有，请确保 CSS background-repeat 属性设置为“重复”。

以这种方式您不必在包含元素本身上设置透明度，因此其文本的不透明度将不受影响。

令人惊奇的是，竟然有制作半透明单像素 .PNG here 的工具。

【参考方案3】：

不透明度适用于整个 div 及其所有子项。不幸的是，您无法撤消该不透明度，而只能添加更多内容。除此之外，CSS 无法选择元素内的文本。

在您的情况下，最好的解决方案是将透明背景图像（带有 PNG）应用到您的 div 块，例如不透明度为 60% 的白色单像素图像。

另一种解决方案是使用不同的框和定位，如this tutorial by Steven York 中所述。

【参考方案4】：

这应该可以回答您几乎所有的问题：http://css-tricks.com/non-transparent-elements-inside-transparent-elements/

【参考方案5】：

最简单的解决方案是创建一个具有正确颜色的半透明 PNG，并将其用作背景图像。

根据您的布局，另一种可能的解决方案是将文本放在单独的图层中，并将其放置在半透明部分的顶部。这样的事情会起作用：

<div style="position: relative; background-image: url('your_image.jpg')">
    <div style="opacity: 0.5; background-color: #fff; position: absolute"></div>
    <div style="position: absolute">The text to go on top</div>
</div>

您需要根据需要添加自己的位置/大小（top、left、width 和 height 属性）。