CSS de l'image de fond sur le dessus de <img>

Comment répétez cette 1px 1px x CSS image de fond sur le dessus de l'HTML <img>?

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

Je suis tombé sur CSS montrer div de l'image d'arrière-plan au-dessus des autres éléments contenus, cependant, elle semble exiger un supplément de div. Idéalement, j'aimerais ne pas avoir à utiliser un div, mais selon CSS Background-image sur le langage HTML img ce n'est pas vraiment possible, du moins pas pour une largeur 100% responsive scénario.

CSS:

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

HTML:

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

InformationsquelleAutor Mark Boulder | 2015-02-25
  1. 27

    Vous pouvez utiliser un pseudo-élément. Dans cet exemple, le :after pseudo-élément est en position absolue relative à l'élément parent. Il prend les dimensions de l'ensemble de l'élément parent, et la taille de l'élément parent est déterminé par la taille de l'enfant img élément.

    CSS:

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

    HTML:

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

    Comme une note de côté, votre exemple n'est pas de travail pour un couple de raisons. Le parent de l'élément a une image de fond, mais depuis l'élément enfant establishs un l'empilement de contexte dans l'élément parent, il n'est pas possible pour le parent de l'image d'arrière-plan apparaissent ci-dessus l'enfant img élément (sauf si vous avez été à masquer complètement le img élément). C'est pourquoi le z-indexs ne fonctionnaient pas comme prévu.

    En outre, la img élément en position absolue. En agissant de la sorte, il est retiré de la circulation normale, et comme il était le seul enfant de l'élément, l'élément parent donc s'effondre sur lui-même et il n'a pas de dimensions. Ainsi, l'image de fond ne s'affiche pas. Pour contourner ce problème, vous devez définir explicite les dimensions de l'élément parent (height/width), ou vous pouvez supprimer le positionnement absolu sur l'enfant img élément.

    InformationsquelleAutor Josh Crozier
  2. 1

    Une autre façon, est de content à vide et de définir un arrière-plan, par exemple:

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

    Voici une démo:
    http://jsfiddle.net/infous/effmea8x/

    Dans cette démo, la première image est la norme, mais avec disproportionnées la largeur et la hauteur, le second est à l'arrière-plan. Le premier est mis à l'échelle mal, le second est OK.

    InformationsquelleAutor starikovs