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

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