当我将鼠标悬停在图像上时,我试图创建一个图像覆盖。
我用来创建叠加层的颜色不会覆盖图像。它围绕图像,我希望它位于图像顶部。
我不确定哪里出了问题。
当您将鼠标悬停在上面时,也会发生这种怪异的跳跃。

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/

10-12 12:47
查看更多