Изменение img для таблицы стилей печати

Question

У меня есть маленькая иконка рядом с текстом, код выглядит так:

<div id="photo-info">
    <p class="textcenter"><img width="16" height="16" 
              src="/Images/Icons/info.png" />Photo Info:</p>
    <p class="textcenter"> Information text here.</p>
</div>

Фон страницы черный, а значок белый. Но когда я печатаю страницу, текст черный с белым фоном. При печати белый значок не отображается, хотя это не является большой проблемой, я хотел бы, чтобы значок отображался при печати. У меня есть еще один значок черного цвета, который можно распечатать. Как я могу переключить их при печати?

Примечание: я мог бы вручную вставить оба изображения на страницу, а затем использовать CSS, чтобы показать и скрыть правильный значок для экрана и печати, но я ищу способ, который будет автоматическим и не потребует от меня возврата и редактирования каждой страницы, которая имеет код в нем.

Answer 1

Другим способом было бы установить background-image на изображении. Так что ваш HTML будет выглядеть так.

<img class="small-icon" width="16" height="16" />

И тогда ваш CSS будет выглядеть примерно так.

.small-icon {
  background-image: url(path/to/image.png);
}

Затем вы можете применить фоновое изображение для каждой таблицы стилей. Таким образом, у вас есть изображение рабочего стола, указанное в таблице стилей рабочего стола, и изображение печати, указанное в таблице стилей печати.