html - 伪元素的边距错误和垂直对齐

Question

我的HTML代码如下:

<article>
    <picture>
        <img src="a.png">
    </picture>
</article

这段 HTML 代码遍布整个页面，其中 img 具有可变宽度。这个想法是能够悬停在 img 上，创建一个带有 + 的图像悬停叠加层。我用这个 CSS 试过了:

article picture { position: relative; }
article picture:before { background: rgba(0,0,0,.75); content: "+"; height: 100%; opacity: 0; position: absolute; transition: opacity .25s ease; width: 100%; }
article picture:hover:before { opacity: 0.9; }

它或多或少起作用了。我的叠加层比我的 img 大，总是像 10 像素，我该如何解决？我想把那个“+”集中在我的 img 上，我做不到。 vertical-align: middle 不起作用，line-height 我无法使用，因为 img 的大小可变。有什么想法吗？

Answer 1

问题是图像的管理类似于内联 block 。您只需要使用 display: block;。

article picture {
  display: inline-block;
  position: relative;
}
img {
  display: block;
}
article picture:before {
  background: rgba(0, 0, 0, .75);
  content: "+";
  height: 100%;
  opacity: 0;
  position: absolute;
  text-align: center;
  top: 0;
  left: 0;
  transition: opacity .25s ease;
  width: 100%;
}
article picture:hover:before {
  opacity: 0.9;
}

<article>
  <picture>
    <img src="http://www.placehold.it/100x100">
  </picture>
  </article

编辑:

这是我为您想要的覆盖层所做的另一种选择:jsfiddle .