Изменение 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); 
} 

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