如何在白色 CSS 背景上叠加黑色文本和图像？

【问题标题】：How to overlay black text and image on white css background?如何在白色 CSS 背景上叠加黑色文本和图像？
【发布时间】：2016-08-22 18:40:53
【问题描述】：

我遇到的问题是这样的：我有一个背景 css 图像，上面覆盖了白色背景色和不透明度 0.8，因此白色 bg 后面的图像可能有点可见。我想在两个背景上添加一些文本和另一个图像，但不透明度在我的文本和图像上也很活跃，因此两者都很难看到。这也是我此刻所拥有的截图。 http://prnt.sc/c8uf8q

【问题讨论】：

CSS background-image-opacity?的可能重复
欢迎来到 Stack Overflow！寻求代码帮助的问题必须包括在问题本身最好在Stack Snippet 中重现它所需的最短代码。见How to create a Minimal, Complete, and Verifiable example

标签： css image

【解决方案1】：

你如何设置背景颜色和不透明度叠加？如果你定义这样的属性：

.overlay{
    background-color: white;
    opacity: 0.8;
}

然后将其替换为：

.overlay{
    background: rgba(255,255,255,0.8);
}

文本将可见

【讨论】：

这是我用来从上面的截图prnt.sc/c9p9ss获取图像的代码
移除不透明度：0.8;来自 #uniquedesign::before{} 因为您已经在 background:rgba(255,255,255,0.8) 中设置了不透明度值； .这里最后一个参数 (0.8) 代表不透明度。