当我将鼠标悬停在图像上时,我试图创建一个图像覆盖。
我用来创建叠加层的颜色不会覆盖图像。它围绕图像,我希望它位于图像顶部。
我不确定哪里出了问题。
当您将鼠标悬停在上面时,也会发生这种怪异的跳跃。
HTML
<div class="overlay">
<div class="overlay2"></div>
<figure class="box-img">
<img src="http://i.imgur.com/PHKC3T9.jpg" alt="" />
</figure>
</div>
的CSS
.overlay:hover{
background: red;
position: absolute;
opacity: 0.7;
}
.box-img img{
position: relative;
}
这是一个jsfiddle:JSFIDDLE
最佳答案
较大的“边界”是由于figure
元素的默认边距和填充而引起的,根据W3,这是常见的规格:
figure {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 40px;
margin-right: 40px;
}
我总是喜欢在样式表的开头进行一次完全重置:
*, *:before, *:after {
margin: 0;
padding: 0;
}
在当前代码形式中,叠加层不会显示在顶部,因为颜色会在背景中。伪元素可能会做您想要做的事情(使用直接方法在此处更新了代码):
http://jsfiddle.net/j0qfhr9e/
<figure class="box-img">
<img src="http://i.imgur.com/PHKC3T9.jpg" alt="" />
</figure>
.box-img {
display: inline-block;
position: relative;
line-height: 0;
}
.box-img:hover:after {
content: '';
width: 100%;
height: 100%;
background: red;
position: absolute;
top: 0;
left: 0;
opacity: 0.7;
}
完整性的初稿,更接近原始标记:
http://jsfiddle.net/rLu2c4kr/
关于html - 使背景色位于图像顶部,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/29722892/