顶部的CSS背景图片

Question

如何在HTML顶部重复此1px x 1px CSS背景图像<img>？

我在[其他包含的元素之上遇到了CSSshowdiv背景图片，但是似乎需要额外的div。理想情况下，我希望我根本不必使用div，但是根据HTMLimg上的[CSS背景图像这实际上是不可能的，至少对于100％宽度响应的场景而言并非如此。

.test {

  background: url(http://placehold.it/1/1) repeat;

  position: relative;

  z-index: 100;

  width: 200px;

}

.test img {

  width: 100%;

  display: block;

  position: absolute;

  z-index: 50;

}


<div class="test">

    <img src="http://lorempixel.com/400/400">

</div>

Answer 1

您可以使用伪元素。在此示例中，:after伪元素 相 对于父元素绝对定位。它采用整个父元素的尺寸，并且父元素的大小由子img元素的大小确定。

.test {

  display: inline-block;

  position: relative;

}

.test:after {

  content: '';

  position: absolute;

  top: 0; right: 0;

  bottom: 0; left: 0;

  background: url(http://placehold.it/20x20/1) repeat;

}


<div class="test">

    <img src="http://lorempixel.com/200/200">

</div>

附带说明一下，您的示例由于几个原因而无法正常工作。父元素具有背景图像，但是由于子元素 在 父元素 内
建立了堆叠上下文 ，_因此父元素的背景图像不可能出现在子元素 _上方img（除非您要完全隐藏该img元素）。这就是为什么z-indexs不能按预期工作的原因。

此外，该img元素是绝对定位的。这样做会将其从常规流中删除，并且由于它是唯一的子元素，因此父元素会自行折叠并且没有任何尺寸。因此，背景图像不会显示。要解决此问题，您要么必须在父元素（height/
width）上设置显式尺寸，要么可以删除子img元素上的绝对位置。