在降低深色背景容器的不透明度时考虑较低的对比度

Question

我目前正在尝试修复一些CSS。我得到的规范是背景应该是透明的，如下所示：

但正如您所看到的，当我将背景设置为透明时，白色文本看起来非常褪色，与之相比：

目前，文本设置为完全白色，在CSS中完全不透明：

.banner-content p {
    color: rgba(255,255,255,1) !important;
}

任何人都可以建议任何CSS技巧来增加表观对比度，因为文本已经尽可能白色和不透明......

Answer 1

设置像这样的容器的不透明度时：

#container {opacity:0.5;}

它会影响容器及其所有子容器的不透明度。所以字体也变得不透明50％。

看起来你真的只想给容器一个半透明的背景，你可以这样做：

#container {background-color:rgba(0, 0, 0, 0.5);}

并且不会影响该容器中的文本。