Html <img> 顶部的 CSS 背景图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28710659/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS background image on top of <img>
提问by Mark Boulder
How does one repeat this 1px x 1px CSS background image on top of the HTML <img>?
如何在 HTML 顶部重复这个 1px x 1px CSS 背景图像<img>？
http://jsfiddle.net/hjv74tdw/1/
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 imgthat's not really possible, at least not for a 100% width responsive scenario.
我遇到了CSS show div background image on top of other contains elements，但是它似乎需要一个额外的 div。理想情况下，我希望我根本不必使用 div，但是根据HTML img上的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>回答by Josh Crozier
You could use a pseudo-element. In this example, the :afterpseudo element is absolutely positioned relativeto 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 imgelement.
您可以使用伪元素。在这个例子中，: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>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 contextwithinthe parent element, it's not possible for the parent's background image to appear abovethe child imgelement (unless you were to completely hide the imgelement). This is why the z-indexs weren't working as expected.
作为旁注，您的示例由于几个原因不起作用。父元素具有背景图像，但由于子元素在父元素内建立了堆叠上下文，因此父元素的背景图像不可能出现在子元素上方img（除非您要完全隐藏该img元素）。这就是z-indexs 没有按预期工作的原因。
In addition, the imgelement 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 imgelement.
此外，该img元素是绝对定位的。这样做时，它会从正常流中移除，并且由于它是唯一的子元素，因此父元素会自行折叠并且没有任何尺寸。因此，背景图像不显示。要解决此问题，您必须在父元素 ( height/ width)上设置显式尺寸，或者您可以删除子img元素上的绝对定位。
回答by starikovs
Another way, is to set contentto empty and set a background, for example:
另一种方法是设置content为空并设置背景，例如：
img {
background: url(...) center center no-repeat;
background-size: cover;
content: '';
display: block;
width: 800px;
height: 100px;
}
Here is a demo: http://jsfiddle.net/infous/effmea8x/
这是一个演示：http: //jsfiddle.net/infous/effmea8x/
In this demo the first image is standard but with unproportional width and hight, the second one is with the background. The first one is scaled badly, the second one is OK.
在这个演示中，第一张图片是标准的，但宽度和高度不成比例，第二张是背景。第一个缩放不好，第二个还可以。
