CSS 如何使用css在图像上添加叠加颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9257217/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to add an overlaying color over an image with css
提问by aurel
if I have an image like so:
如果我有这样的图像：
<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?
在悬停时，我希望该块被一种颜色覆盖。例如，当您将鼠标悬停在它上面时，您会看到一块具有相同高度和宽度的红色块。所以基本上是叠加？
采纳答案by elclanrs
It can be done multiple ways but you can just wrap it in a <div>with a background-colorand set visibility: hiddenon the image on :hover
它可以通过多种方式完成，但您可以将其包裹在<div>a 中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>回答by Jim Jeffers
Here are two ways you can do this - both involve wrapping the image in a containing element.
这里有两种方法可以做到这一点 - 都涉及将图像包装在包含元素中。
Use the Container's Background
使用容器的背景
You can set the background of the containing element to red and then decrease the images opacity on hover:
您可以将包含元素的背景设置为红色，然后在悬停时降低图像的不透明度：
The HTML looks like this:
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>
And the CSS looks like this:
CSS 看起来像这样：
div { position: relative; float: left; }
img { display: block; }
#background { background: red; }
#background:hover img { opacity: 0.5; }
Use a Sibling Element
使用兄弟元素
You can nest an empty span and use it as an absolutely positioned sibling which can serve as the overlay. Check this out - here's the HTML:
您可以嵌套一个空跨度并将其用作绝对定位的同级，可用作叠加层。看看这个 - 这是 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>?
And the CSS would look like this:
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; }
You can try out a demo of each solution here:
您可以在此处试用每个解决方案的演示：
http://jsfiddle.net/jimjeffers/mG78d/1/
http://jsfiddle.net/jimjeffers/mG78d/1/
Possible Gotcha
可能的陷阱
It's important to note that in order for the containing element to match the size of your image you need to do one of four things:
重要的是要注意，为了使包含元素与图像的大小相匹配，您需要执行以下四件事之一：
- Float the containing element.
- Absolutely position the containing element.
- Set the containing element to display: inline-block.
- Explicitly set the height and width of the containing element to match the image's dimensions.
- 浮动包含元素。
- 绝对定位包含元素。
- 将包含元素设置为显示：inline-block。
- 显式设置包含元素的高度和宽度以匹配图像的尺寸。
In my jsfiddle example I set the divs to float: left;.
在我的 jsfiddle 示例中，我将 div 设置为 float: left;。
