44

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

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

任何建议表示赞赏。

谢谢。

4

5 回答 5

72

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

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

不久前，我写了一篇关于如何以向后兼容的方式实现这一点的文章。

于 2010-03-08T14:31:04.863 回答
4

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

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

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

于 2015-06-28T15:56:59.640 回答
2

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

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

另一种解决方案是使用不同的盒子和定位，就像Steven York 在本教程中描述的那样。

于 2010-03-08T14:49:15.527 回答
0

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

于 2010-03-08T14:55:57.490 回答
0

最简单的解决方案是创建一个具有正确颜色的半透明 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）。widthheight

于 2010-03-08T16:10:45.987 回答