如何使用css在图像上添加叠加颜色

Question

如果我有这样的图像:

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

并且在悬停时我希望该块被覆盖在一种颜色中.因此,例如,当您将鼠标悬停在它上面时,您将获得一块具有相同高度和宽度的红色.那么叠加基本上呢？

Answer 1

这有两种方法可以做到这一点 - 都涉及将图像包装在一个包含元素中.

使用容器的背景

您可以将包含元素的背景设置为红色,然后在悬停时减少图像的不透明度:

HTML看起来像这样:

<!-- Uses background color to fade color from behind. -->
<div id="background">
    <img src="http://lorempixel.com/100/100/food" height="100" width="100" />
</div>

CSS看起来像这样:

div { position: relative; float: left; }
img { display: block; }

#background { background: red; }
#background:hover img { opacity: 0.5; }

使用兄弟元素

您可以嵌套空跨度并将其用作绝对定位的兄弟,可以作为叠加.看看这个 - 这是HTML:

<!-- Uses empty span to overlay color. -->
<div id="overlay">
    <img src="http://lorempixel.com/100/100/food" height="100" width="100" />
    <span></span>
<div>?

CSS看起来像这样:

div { position: relative; float: left; }
img { display: block; }

#overlay span {
    background: red;
    bottom: 0;
    display: block;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
}

#overlay:hover span { opacity: 0.5; }

您可以在此处试用每个解决方案的演示:

http://jsfiddle.net/jimjeffers/mG78d/1/

可能的陷阱

重要的是要注意,为了使包含元素与图像的大小相匹配,您需要执行以下四种操作之一:

1. 浮动包含元素.
2. 绝对定位包含元素.
3. 将包含元素设置为display:inline-block.
4. 显式设置包含元素的高度和宽度以匹配图像的尺寸.

在我的jsfiddle示例中,我将div设置为float:left;.

Answer 2

它可以通过多种方式完成，但您可以将其包裹在 a<div>中background-color并设置visibility: hidden在图像上:hover

div { 
  background: red; 
  display: inline-block; 
}

img { 
  display: block; 
}

div:hover img { 
  visibility: hidden; 
}

<div>
  <img src="https://via.placeholder.com/350x150">
</div>