悬停的颜色透明度覆盖层

Question

在我的个人网站上工作，我有悬停的图像，我想拥有一个深红色的覆盖层，有些透明。到目前为止，我可以找到Webkit的所有所能改变照片的亮度，饱和度或色调。

我可能会补充说，这些功能仅在将标签指定为" img"等标签时起作用，并且它们不使用" class"或" id"。

。

任何帮助都很棒。

这是我的代码：

html

<div>
<img src="images/amadea/book.jpg" alt="Amadea Bailey- Abstract Expressionist">
</div>

CSS

img{
    display: block;
}
img:hover{
    -webkit-filter:  grayscale(100%) brightness(51%);
}

Answer 1

您可以使用与父 div元素绝对位置的 :after pseudo元素。伪元素的大小将与父元素相同，因此它适用于所有img尺寸。基本上，它只是在:hover上添加了透明覆盖层，从而实现了您要寻找的"过滤器"。您可以使用任何背景颜色，自定义透明度，甚至添加内容。

示例此处

div {
    position:relative;
    display:inline-block;
}
div:hover:after {
    content:"A";
    width:100%;
    height:100%;
    background:rgba(255, 0, 0, 0.5);
    position:absolute;
    top:0;
    left:0;
}