Замените изображение другим изображением, используя CSS

Question

В части программного обеспечения, которое мы используем сторонним поставщиком для обработки ошибок проверки. Мы обновляем пользовательский интерфейс в настоящий момент и хотим заменить изображение, отображаемое в настоящее время нашим собственным пользовательским изображением.

Я могу настроить таргетинг изображения с помощью CSS, однако текущее изображение по-прежнему отображается поверх нового изображения.

Heres мой HTML

<td > 
<img src="warning.gif" border="0"> 
</td> 

Мой CSS

td img { 
    background-image: url("required.png")!important; 
} 

Как можно скрыть существующий образ и показать мое изображение только с помощью CSS

Answer 1

Попробуйте использовать content:url("required.png")

полный Код CSS:

td img { 
    content: url("required.png"); 
} 

Answer 2

<div class="header"> 
    <img class="banner" src="//notrealdomain1.com/banner.png"> 
</div> 

/* All in one selector */ 
.banner { 
    display: block; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    background: url(http://notrealdomain2.com/newbanner.png) no-repeat; 
    width: 180px; /* Width of new image */ 
    height: 236px; /* Height of new image */ 
    padding-left: 180px; /* Equal to width of new image */ 
} 

Источник + дополнительное объяснение: CSS Tricks

Answer 3

Вы можете использовать :after псевдо-элемент:

td:hover::after { 
 
    content:url(http://placehold.it/350x150/888/333); 
 
} 
 
td:hover > img { 
 
    display:none; 
 
}

<table> 
 
    <tr> 
 
     <td> 
 
      <img src="http://placehold.it/350x150/333/888" border="0"> 
 
     </td> 
 
    </tr> 
 
</table>