如何使用css在图像上添加叠加颜色 [英] how to add an overlaying color over an image with css

问题描述

如果我有这样的图片：

<img src="inshot1.jpg" width="100px" height="100px">​​​​​​​

被覆盖在一种颜色。所以，例如当你悬停在它上面，你会得到一个红色的块，具有相同的高度和宽度。所以一个覆盖基本上是？

and on hover I want that block to be covered in a color. So for example when you hover over it you get a block of red color with the same height and width. So an overlay basically?

推荐答案

它可以做多种方式，但你可以把它包装在 < div> 使用背景颜色并在图片上设置 visibility：hidden ：hover

It can be done multiple ways but you can just wrap it in a <div> with a background-color and set visibility: hidden on the image on :hover

html：

<div><img src="img.jpg"></div>

css

div { background: red; display: inline-block; }
img { display: block; }
div:hover img { visibility: hidden; }

这篇关于如何使用css在图像上添加叠加颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！