Immagine di sfondo CSS sopra <img>

Question

Come si può ripetere questa immagine di sfondo CSS 1 x 1px sopra l'HTML <img>?

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

mi sono imbattuto CSS show div background image on top of other contained elements, tuttavia sembra richiedere un extra div. Idealmente, vorrei non dover usare affatto un div, ma secondo lo CSS Background-image over HTML img non è possibile, almeno non per uno scenario reattivo al 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>

Answer 1

È possibile utilizzare un pseudo-elemento. In questo esempio, lo pseudo elemento :after è posizionato in modo assoluto relativo all'elemento padre. Prende le dimensioni dell'intero elemento genitore e la dimensione dell'elemento genitore è determinata dalla dimensione dell'elemento figlio 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>

Come nota a margine, il tuo esempio non funzionava per un paio di motivi. L'elemento genitore ha un'immagine di sfondo, ma dal momento che l'elemento figlio establishs un stacking contextall'interno l'elemento principale, non è possibile per un'immagine di sfondo del genitore appaia sopra l'elemento figlio img (a meno che non si dovesse nascondere completamente l'elemento img). Questo è il motivo per cui i z-index non funzionavano come previsto.

Inoltre, l'elemento img è stato posizionato in modo assoluto. In tal modo, viene rimosso dal flusso normale e, poiché era l'unico elemento figlio, l'elemento padre collassa quindi su se stesso e non ha alcuna dimensione. Pertanto, l'immagine di sfondo non viene visualizzata. Per risolvere il problema, è necessario impostare dimensioni esplicite sull'elemento padre (height/width) oppure rimuovere il posizionamento assoluto sull'elemento figlio img.

Answer 2

Un altro modo, è quello di impostare content da svuotare e impostare uno sfondo, ad esempio:

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

Questo vuole essere un demo: http://jsfiddle.net/infous/effmea8x/

in questa demo prima immagine è standard, ma con non proporzionale larghezza e altezza, il secondo è con lo sfondo. Il primo è scalato male, il secondo è OK.