html - 如何设置图像透明度颜色？

Question

在为我的透明度添加不同颜色时遇到一些问题。以前它是图像顶部的黑色填充，所以当我将图像悬停在它上面时，阴影会亮起。但是，当我尝试为其添加红色 rgba 颜色时，透明度保持不变。

    img {
    opacity:0.4;
    filter:alpha(opacity=40); /* For IE8 and earlier */
    color: rgba(255, 0, 0, 0.2);
    }

    img:hover {
    opacity:1.0;
    filter:alpha(opacity=100); /* For IE8 and earlier */
    color: rgba(255, 0, 0, 0.2);
    }

Answer 1

您需要将您的color财产更改为background-color.

CSS

img {
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
background-color: rgba(255, 0, 0, 0.2);
}

img:hover {
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
background-color: rgba(255, 0, 0, 0.2) !important;
}

JSFIDDLE