在降低深色背景容器的不透明度时考虑较低的对比度
Accounting for lower contrast when decreasing the opacity of dark background container
我目前正在尝试修复一些 CSS。我得到的规格是背景应该是透明的,像这样:
但是如您所见,当我将背景设置为透明时,白色文本看起来很褪色,与以下内容相比:
目前文本设置为全白,在 CSS 中完全不透明:
.banner-content p {
color: rgba(255,255,255,1) !important;
}
任何人都可以建议任何 CSS 技巧来增加明显的对比度,因为文本已经是尽可能的白色和不透明...
当您像这样设置容器的不透明度时:
#container {opacity:0.5;}
它会影响容器及其所有子项的不透明度。所以字体也变成了 50% 不透明。
看来您真的只想给容器一个半透明的背景,您会这样做:
#container {background-color:rgba(0, 0, 0, 0.5);}
这不会影响该容器中的文本。
我目前正在尝试修复一些 CSS。我得到的规格是背景应该是透明的,像这样:
但是如您所见,当我将背景设置为透明时,白色文本看起来很褪色,与以下内容相比:
目前文本设置为全白,在 CSS 中完全不透明:
.banner-content p {
color: rgba(255,255,255,1) !important;
}
任何人都可以建议任何 CSS 技巧来增加明显的对比度,因为文本已经是尽可能的白色和不透明...
当您像这样设置容器的不透明度时:
#container {opacity:0.5;}
它会影响容器及其所有子项的不透明度。所以字体也变成了 50% 不透明。
看来您真的只想给容器一个半透明的背景,您会这样做:
#container {background-color:rgba(0, 0, 0, 0.5);}
这不会影响该容器中的文本。