伪造元素

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

问题是图像管理类似于内联块。您只需使用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。