Как заменить img=src на другое изображение посредством CSS?

Question

[Алина Андреева]

Дано в HTML:

<div class="block">
     <img src=.....>

Требуется заменить через CSS (не трогая HTML) картинку на другую по ссылке - как это оптимальнее сделать?

Answer 1

[Ankhena]

Картинку скрыть.
Показать фон у блока.

Answer 2

[Максим]

Урл ни как не изменить через css
Но в css можно указать background-image

Answer 3

[Алина Андреева]

Пробовала, изображение не меняется:

.block{
  width:150px;
  border:1px solid black;
  text-align:center;
}
img{
  display:block;
  margin-left:auto;
  margin-right:auto;
  background-image: url(.../79x115/el_sku_R0X401_79x115_0.jpg);

Comments

[Максим]

у изображения не может быть background в самом низу есть правильный ответ ...скрыть img и показать background-image

[Eugene Chefranov]

Вот на CSS

.block {
  z-index: 1;
  position: relative;
}

.block img {
  opacity: 0;
}

.block:before {
  content: "";
  display: block;
  position: absolute;
  padding-left: 50%;
  height: 100%;
  background-image: url(https://placeimg.com/640/480/nature);
  z-index: 2;
}

[alex]

Eugene Chefranov, Ankhena зачем менять контент на оформление?

[Ankhena]

Alex, какие еще идеи сделать это на css и не трогая разметки?

[alex]

Ankhena, никаких, но это вообще нездоровая фигня. хотя автору виднее я думаю

[Ankhena]

Alex, нездоровая, да, но если надо, то способ в ответе )).

Answer 4

[Eugene Chefranov]

С помощью jQuery проще всего
$('.block > img').attr('src', 'Новая ссылка');

Comments

[Alex]

True Native CSS solution TOO :)