悬停时颜色透明度叠加

Posted 2023-03-06

【中文标题】悬停时颜色透明度叠加

【英文标题】：Color transparency overlay on hover

【发布时间】：2014-02-20 19:17:40

【问题描述】：

在我的个人网站上工作，我有一些图像，在悬停时我希望有一个有点透明的深红色叠加层。到目前为止，我能用 webkit 找到的只是改变照片的亮度、饱和度或色调。

我可能会补充一点，这些功能只有在我将它们指定为诸如“img”之类的标签时才有效，并且它们不适用于“class”或“id”。

任何帮助都会很棒。

这是我的代码：

html

<div>
<img src="images/amadea/book.jpg" >
</div>

css

img
    display: block;


img:hover
    -webkit-filter:  grayscale(100%) brightness(51%);

【参考方案1】：

您可以使用相对于父 div 元素绝对定位的 :after 伪元素。伪元素与父元素的大小相同，因此它适用于所有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;
 

【讨论】：

@NoobEditor 这是换行符或墨盒返回。其中的一个。不一定需要，'' 可以正常工作。

@user3171515 ：您可能想将此答案标记为已接受...它将问题标记为已完成！ :)