如何在HTML <img>
之上重复此1px x 1px CSS背景图片?
http://jsfiddle.net/hjv74tdw/1/
我遇到了CSS show div background image on top of other contained elements,但似乎需要一个额外的div。理想情况下,我希望我根本不必使用div,但根据CSS Background-image over HTML img,这是不可能的,至少不是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>
答案 0 :(得分:26)
您可以使用伪元素。在此示例中,:after
伪元素绝对位于 relative 到父元素。它采用整个父元素的维度,父元素的大小由子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;
}
&#13;
<div class="test">
<img src="http://lorempixel.com/200/200">
</div>
&#13;
作为旁注,您的示例由于几个原因而无法正常工作。父元素具有背景图像,但由于子元素在父元素内建立stacking context ,因此父母的背景图像不可能出现上面子img
元素(除非您完全隐藏img
元素)。这就是为什么z-index
没有按预期工作的原因。
此外,img
元素绝对定位。在这样做时,它从正常流中移除,并且由于它是唯一的子元素,因此父元素自身折叠并且它没有任何尺寸。因此,背景图像不会显示出来。要解决此问题,您必须在父元素(height
/ width
)上设置显式尺寸,或者您可以删除子img
元素上的绝对定位。
答案 1 :(得分:1)
另一种方法是将content
设置为空并设置背景,例如:
img {
background: url(...) center center no-repeat;
background-size: cover;
content: '';
display: block;
width: 800px;
height: 100px;
}
这是一个演示: http://jsfiddle.net/infous/effmea8x/
在这个演示中,第一个图像是标准的,但是具有不成比例的宽度和高度,第二个图像是背景。第一个是严重缩放,第二个是好的。
答案 2 :(得分:0)
这就是我为解决方案所做的。本质上,我使用“ IMG”作为占位符。这样我的背景图片会随着浏览器调整大小而保持正确的比例。
.image-overlay {
background-image: url("insert image here");
display: inline-block;
position: relative;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.image-overlay img {
opacity: 0;
}
HTML
<div class="category-overlay">
<img src="/images/placeholder.jpg" alt="">
</div>