CSS - возможно ли перезаписать изображение фоновым изображением?

Question

Можно ли как-то перезаписать изображение новым изображением background-image?

Я не смогу изменить изображение в зависимости от того, сетчатка ли это или нет с помощью css.

пример

HTML:

<img id="foo" src="foo.png">

CSS:

#foo { background: url("bar.png") }

Answer 1

Кажется, немного запутанная стратегия для меня. Позвольте мне предложить лучший вариант для работы с изображениями с качеством сетчатки. Самая простая стратегия, которую я видел для этого (и я чувствую себя лучше всего на этом этапе), состоит в том, чтобы сделать изображение в два раза больше ширины и высоты, которое вам нужно в Photoshop, а затем сохранить его с довольно низким качеством, чтобы уменьшить размер файла. В своем HTML, или в CSS, или в обоих, установите желаемую ширину и высоту изображения. Таким образом, он будет отлично смотреться как на обычных экранах, так и на сетчатке, и при этом будет иметь очень маленький размер файла. И вам нужно только одно изображение, и это здорово.

Answer 2

Попробуй css3 :before:

img{
  display:none;
}
img:before{
  content: "";
  width: 20px;
  height: 20px;
  background: url("bar.png");
}