在< img>顶部的CSS背景图像 [英] CSS background image on top of <img>

问题描述

如何在HTML之上重复此1px x 1px CSS背景图片< img> ？

http://jsfiddle.net/hjv74tdw/1/

我遇到了 CSS显示div背景图像在其他包含的元素的顶部，但它似乎需要一个额外的div。理想情况下，我希望我不必使用div，但根据 CSS背景

  .test {background ：url（http://placehold.it/1/1）repeat;位置：相对; z指数：100; width：200px;}。test img {width：100％;}显示：block; position：absolute; z-index：50;}  

 < div class = test> < img src =http://lorempixel.com/400/400>< / div>  

>

解决方案

您可以使用伪元素。在此示例中，：之后伪元素绝对定位到父元素相对。它采用整个父元素的维度，父元素的大小由子 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-index 无法正常工作的原因。

此外， img 元素绝对定位。这样做，它从正常流中删除，并且由于它是唯一的子元素，因此父元素在自身上崩溃，并且它没有任何维度。因此，背景图像不出现。要解决这个问题，你需要在父元素（ height / width ）上设置显式维度，您可以删除 img 元素上的绝对定位。

How does one repeat this 1px x 1px CSS background image on top of the HTML <img>?

http://jsfiddle.net/hjv74tdw/1/

I came across CSS show div background image on top of other contained elements, however it seems to require an extra div. Ideally I wish I didn't have to use a div at all, but according to CSS Background-image over HTML img that's not really possible, at least not for a 100% width responsive scenario.

.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>

解决方案

You could use a pseudo-element. In this example, the :after pseudo element is absolutely positioned relative to the parent element. It takes the dimensions of the entire parent element, and the size of the parent element is determined by the size of the child img element.

.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>

As a side note, your example wasn't working for a couple of reasons. The parent element has a background image, but since the child element establishs a stacking context within the parent element, it's not possible for the parent's background image to appear above the child img element (unless you were to completely hide the img element). This is why the z-indexs weren't working as expected.

In addition, the img element was absolutely positioned. In doing so, it is removed from the normal flow, and since it was the only child element, the parent element therefore collapses upon itself and it doesn't have any dimensions. Thus, the background image doesn't show up. To work around this, you would either have to set explicit dimensions on the parent element (height/width), or you could remove the absolute positioning on the child img element.

这篇关于在< img>顶部的CSS背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！