CSS Hintergrundbild oben auf <img>

Question

Wie wiederholt man dieses 1px x 1px CSS-Hintergrundbild über den HTML <img>?

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

Ich kam in CSS show div background image on top of other contained elements, aber es ist ein extra div zu erfordern scheint. Idealerweise wünschte ich, ich hätte überhaupt kein div verwenden müssen, aber laut CSS Background-image over HTML img ist das nicht wirklich möglich, zumindest nicht für ein 100% width responsives Szenario.

.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

Sie ein Pseudoelement verwenden könnte. In diesem Beispiel ist das :after Pseudoelement absolut relativ zum übergeordneten Element positioniert. Es verwendet die Dimensionen des gesamten übergeordneten Elements und die Größe des übergeordneten Elements wird durch die Größe des untergeordneten Elements bestimmt.

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

Als Randbemerkung, wurde Ihr Beispiel für eine Reihe von Gründen nicht funktioniert. Das übergeordnete Element hat ein Hintergrundbild, aber da das Kind Element eine stacking contextinnerhalb das übergeordnete Element establishs, ist es nicht möglich, das Hintergrundbild der Eltern oben das Kind img Element zu erscheinen (es sei denn Sie das img Element vollständig zu verbergen waren). Aus diesem Grund funktionierten die z-index s nicht wie erwartet.

Zusätzlich wurde das img Element absolut positioniert. Auf diese Weise wird es aus dem normalen Fluss entfernt, und da es das einzige Kindelement war, kollabiert das Elternelement daher auf sich selbst und es hat keine Dimensionen. Daher wird das Hintergrundbild nicht angezeigt. Um dies zu umgehen, müssten Sie entweder explizite Bemaßungen für das übergeordnete Element festlegen (height/width), oder Sie können die absolute Positionierung für das untergeordnete Element img entfernen.

Answer 2

Ein anderer Weg ist content zu setzen einen Hintergrund, zum Beispiel zu leeren und setzen:

img { 
    background: url(...) center center no-repeat; 
    background-size: cover; 
    content: ''; 
    display: block; 
    width: 800px; 
    height: 100px; 
} 

Hier eine Demo ist: http://jsfiddle.net/infous/effmea8x/

In dieser Demo das erste Bild ist Standard, aber mit unproportional Breite und Höhe, der zweite ist mit dem Hintergrund. Der erste ist schlecht skaliert, der zweite ist OK.