顶部的CSS背景图片

  • Z时代
  • 2024-01-10
  • 分类：问答

我在[其他包含的元素之上遇到了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>

回答：

您可以使用伪元素。在此示例中，: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元素上的绝对位置。

以上是 顶部的CSS背景图片 的全部内容， 来源链接： utcz.com/qa/433294.html

回到顶部