Question

是否可以将背景网址图像的不透明度设置为.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的背景不透明度（α值）*在乘以不透明度时变为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）。请注意，这也会影响边框和文本颜色的不透明度。

Answer 2

不，在使用不透明度时，不可能。不透明度将改变整个街区和其内容为不透明度：0.2;如果你使用它。

我可以设置背景网址的不透明度和背景颜色本身的不透明度吗？

2 个答案: