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

Question

我有一个带有60%的不透明度的div，以显示div背后的一部分背景图像。由于不透明度是60%，因此该div中的文本呈灰色。

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

欢迎任何建议。

谢谢。

- Dan

Answer 1

将不透明度设置在背景上而不是该元素本身。

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

前一段时间我写了关于如何以向后兼容的方式实现这一点的文章。

- Quentin

---

IE7和IE8支持透明PNG吗？ - user736893

@RohitTigga - 我们怎么知道呢？我们看不到你做了什么，所以也无法判断你哪里出错了。你应该提出一个新问题，包括一个[MCVE]，并在其中引用这个答案。 - Quentin

这是我的进展。然而，我不确定为什么当我通过背景图像设置不透明度时它没有改变。 https://jsfiddle.net/RohitTigga/akz5zng7/1/ - Rohit Tigga

Answer 2

我过去在自己的网站上进行了试验。到目前为止，实现你想要的最简单的方法是创建一个透明度小于100％（即部分透明）的单像素 .PNG 图像，并将其用作背景图像。默认情况下，它将填充整个包含元素-如果不填充，请确保将 CSS 背景重复属性设置为“repeat”。以这种方式进行操作，您无需在包含元素本身上设置透明度，因此其文本的不透明度不会受到影响。

令人惊讶的是，有一个工具可以制作半透明的单像素 .PNG，在这里。

- JohnTheTinkerer

Answer 3

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

在您的情况下，最好的解决方案是将透明背景图像（使用PNG）应用于div块，例如60％不透明度的白色一像素图像。

另一种解决方案是使用不同的框和定位方式，如Steven York的这个教程中所述。

- Johann Philipp Strathausen

Answer 4

最简单的解决方案是创建一个半透明的 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属性）。

- DisgruntledGoat

Answer 5

这应该能回答你所有的问题：http://css-tricks.com/non-transparent-elements-inside-transparent-elements/

- CIDIC