html - :hover image overflow issue

Question

我正在创建悬停效果，以便当有人将鼠标悬停在图像上时出现扫描线，但无法使该死的叠加图像与图像大小相同。

看看这个 fiddle :http://jsfiddle.net/number8pie/wwmPL/

这是 HTML:

<div class="container">
 <a href="#">
  <div class="overlay"></div>        
  <img src="http://www.mainlymunros.co.uk/images/green%20square.bmp" repeat>
 </a>
</div>

这是 CSS:

.container {
  position: relative;
  max-width: 200px;
}
img {
  width: 100%;
  position: relative;
  z-index: 1;
  padding: 7px;
  border: 1px solid #333;
}
.overlay {
  display: none;
  position: absolute;
  z-index: 5;
  width: 100%;
  height: 100%;
  margin: 8px;
  background: url(https://dl.dropbox.com/u/29825082/scanlines.png) repeat;
}

a:hover .overlay {
  display: block;
}

如果将鼠标悬停在绿色 block 上，您可以看到扫描线在底部重叠，我想移除这种重叠。

图片是动态的，会根据浏览器的尺寸改变大小。

有人有什么建议吗？

Answer 1

问题是您给了它 100% 的高度和 100% 的宽度，然后又给了它边距。你告诉它是它包含 a 元素的确切大小，但随后将它向下推了一点。

您需要添加一个额外的容器，移除图像的填充和边框并将其分配给新容器。

<a href="#">
    <div class="image">
        <div class="overlay"></div>        
        <img src="http://www.mainlymunros.co.uk/images/green%20square.bmp"/>
    </div>
</a>

.container a { 
    display:block;
    padding:7px;
    border: 1px solid #333;
}
.image {
    position:relative;
    width:100%;
    height:100%;
    display:block;
}
img {
    width: 100%;
    position: relative;
    z-index: 1;
}
.overlay {
    display: none;
    position:absolute;
    z-index: 5;
    width: 100%;
    height: 100%;
    background: url(https://dl.dropbox.com/u/29825082/scanlines.png) repeat;
}

示例:JSFiddle .

您现在的问题是您的 img 不是正方形。作为宽度大于高度的矩形图像意味着它将填充 100% 的宽度，但会切掉部分高度。将您的图像设为正方形或为您的叠加层提供相同的纵横比，这将非常有效。