如果我有这样的图像:
<img src="inshot1.jpg" width="100px" height="100px">
并且在悬停时我想要用一种颜色覆盖该块。因此,例如,当您将鼠标悬停在它上面时,您将获得一块具有相同高度和宽度的红色。所以基本上是叠加?
答案 0 :(得分:12)
这有两种方法可以做到这一点 - 都涉及将图像包装在一个包含元素中。
使用容器的背景
您可以将包含元素的背景设置为红色,然后在悬停时降低图像的不透明度:
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/
可能的问题
重要的是要注意,为了使包含元素与图像的大小相匹配,您需要执行以下四种操作之一:
在我的jsfiddle示例中,我将div设置为float:left;。
答案 1 :(得分:3)
可以通过多种方式完成,但您只需将<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>