如何在不更改现有背景色的情况下指定background-color
的不透明度?
例如,考虑:
div {
width: 100px;
height: 100px;
}
.blue {
background-color: blue;
}
.green {
background-color: green;
}
.light {
background-color: rgba(?, ?, ?, 0.9) /* <--- what do I use here? */
}
<div class="blue"></div>
<div class="green"></div>
<div class="blue light"></div>
<div class="green light"></div>
我可以在 div.light
中提供什么值来更改不透明度而不覆盖/更改绿色/蓝色?类似于 background-alpha
或 background-opacity
(不存在)
编辑:我根本不想改变 div contents 的不透明度;只是背景。
编辑:我知道有涉及添加 DOM 的解决方案,但这违背了设计最佳实践(不要使用 DOM 进行样式设置),我的目标是仅使用 CSS 的解决方案。
最佳答案
您可以为背景使用伪元素并使用 opacity
div.blue::before {
background-color: blue;
}
div.green::before {
background-color: green;
}
div.light::before {
background-color: rgba(?, ?, ?, 0.9)
}
div::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
z-index: -1;
}
div {
position: relative;
}
.light::before {
opacity: .5;
}
<div class="blue">blue</div>
<div class="green">green</div>
<div class="blue light">blue light</div>
<div class="green light">green light</div>
关于html - 指定背景不透明度而不指定颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45201344/