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

您可以使用相对于父:after元素绝对定位的div伪元素。伪元素的大小与父元素的大小相同，因此它适用于所有img维度。它基本上只是在:hover上添加透明叠加层，实现了您正在寻找的“过滤器”。您可以使用任何背景颜色，自定义透明度甚至添加内容..

EXAMPLE HERE

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;
}

悬停时颜色透明度覆盖

1 个答案: