Question

当我将鼠标悬停在图片上时，我正试图创建一个覆盖图片。我用来创建叠加层的颜色不会覆盖图像。它围绕图像，我希望它在图像的顶部。我不知道哪里出错了。当你将鼠标悬停在它上面时，这也是一种奇怪的跳跃。

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

Answer 1

大边界＆＃39;是因为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/

Answer 2

另一个让没有psuedo类的工作的替代品'像@Shikkediel提到你可以设置可以使用背景图像而不是图像标签http://jsfiddle.net/zgw5tmrc/3/

body, figure {
    padding:0;
    margin: 0;
}
.box-img {
    position: relative;
    height: 300px;
    width: 300px;
    background: url('http://i.imgur.com/PHKC3T9.jpg');
    background-size: cover;
}

.box-img:hover .overlay{
    position: absolute;
    background: red;
    width: 100%;
    top:0;
    bottom:0;
    left: 0;
    right:0;
    opacity: .7;
}

<figure class="box-img">
    <div class="overlay"></div>
</figure>

Answer 3

＆＃13;

figure {
  position: relative;
  display: inline-block;
}
img {
  display:block;
}
figure:hover::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom:0;
  background: red;
  opacity: 0.7;
}

＆＃13;

<figure>
  <img src="http://i.imgur.com/PHKC3T9.jpg" alt="" />
</figure>

＆＃13;

Answer 4

以这种方式重组您的标记（此处为JSFIDDLE ）

<强> HTML

<div class="overlay-container">
    <div class="overlay"> </div>
    <figure class="box-img">
        <img src="http://i.imgur.com/PHKC3T9.jpg" alt="" />
    </figure>
</div>

<强> CSS

.overlay-container {
    width:225px;
    height:225px;
    position: relative;
}
.overlay-container:hover .overlay{
    background: red;
    position: absolute;
    opacity: 0.7;
    z-index:1;
    width: 100%;
    height: 100%;
    margin-left: 40px;
}
.box-img img{
    position: relative;
}

这是JSFIDDLE

获取背景颜色在图像上

4 个答案: