更改打印样式表的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);
}

然后，您可以按样式表应用背景图像。这样，您就可以在桌面样式表中指定桌面图像，并在打印样式表中指定打印图像。