css - 我可以设置背景 url 的不透明度和背景颜色本身的不透明度吗？

Question

是否可以将背景 url 图像的不透明度设置为 .8，将背景颜色的不透明度设置为 .2？

这是我尝试过的方法，但它似乎不起作用。

#tagholder:hover {
    background: rgba(255, 0, 0, 0.8) url("../images/arrow-white.png");
    background-repeat:no-repeat;
    background-position: center;
    background-color: #293333;
    opacity: 0.2;

}

Answer 1

简短的回答是否定的。 编辑:实际上，简短的回答是肯定的，见下文。不透明度就像是同一元素中存在的任何 rgba 值的乘数。考虑一下:

 div {
    background-color:rgba(0,0,0,0.5);
    opacity:0.5;
 }

当乘以不透明度时，0.5(alpha 值)的背景不透明度有效*变为 0.25:0.5 x 0.5 = 0.25。参见 this fiddle .

*我说有效是因为颜色略有不同，但用肉眼几乎不可能分辨。

编辑:正如@vals 所指出的，您可以获得最初要求的效果:

#tagholder:hover {
    background: rgba(255, 0, 0, 0.25) url("../images/arrow-white.png");
    background-repeat:no-repeat;
    background-position: center;
    opacity: 0.8;
}

这将使整个元素的整体不透明度为 0.8，而背景颜色的不透明度将为 0.2 (0.8 * 0.25 = 0.2)。请注意，这也会影响边框的不透明度和文本颜色。