Изображение CSS поверх <img>

Как повторить этот 1px x 1px фоновый рисунок CSS поверх HTML <img>?

Я наткнулся на CSS показать фоновое изображение div поверх других содержащихся элементов, однако, похоже, требуется дополнительный div. В идеале мне жаль, что мне не нужно было использовать div вообще, но в соответствии с Фоновым изображением CSS над 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>

Ответы

Ответ 1

Вы можете использовать псевдоэлемент. В этом примере псевдоэлемент :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>

Ответ 2

Другой способ: установить content на пустой и установить фон, например:

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

Вот демо: http://jsfiddle.net/infous/effmea8x/

В этой демонстрации первое изображение стандартное, но с непропорциональной шириной и высотой, второе - с фоном. Первый из них плохо масштабируется, второй - в порядке.