Question

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

无论如何都要覆盖此级别并使文本显示为黑色？

任何建议表示赞赏。

感谢。

Answer 1

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

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

前段时间我写了关于achieve this in a backwards compatible way的方法。

Answer 2

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

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

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

Answer 3

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

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

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

Answer 4

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

Answer 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属性）。

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

5 个答案: