当用户打印“打印背景颜色和图像”时，任何基于背景或背景图像的方法都可能失败。 不幸的是，这是典型浏览器的默认设置。

这里唯一的打印友好和跨浏览器兼容的方法是Bronx提出的方法。

他们是对的。IMG是内容元素，CSS是设计元素。 但是，当您出于设计目的使用某些内容元素或属性时，情况又会如何呢? 我有IMG跨我的网页，必须改变，如果我改变样式(CSS)。

好吧，这是一个解决方案定义IMG表示(不是真正的图像)在CSS风格。

创建一个1x1透明GIF或png。 将IMG的属性“src”分配给该图像。 在CSS样式中用“background-image”定义最终的表示形式。

它的工作就像一个魅力:)

如果你不想设置背景属性，那么你不能只使用CSS来设置图像的src属性。

您也可以使用JavaScript来完成这一任务。

我使用了空的div解决方案，与这个CSS:

#throbber {
    background-image: url(/Content/pictures/ajax-loader.gif);
    background-repeat: no-repeat;
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
}

HTML:

<div id="throbber"></div>

使用内容:url(“image.jpg”)。

完整的工作方案(现场演示):

<！doctype html > <时尚> .MyClass123 { 内容:url(“http://imgur.com/SZ8Cm.jpg”); ｝ > < /风格 < img类= " MyClass123 " / >

测试和工作:

Chrome 14.0.835.163 Safari你 Opera 10.6 Firefox 100及更新版本

已测试且不工作:

FireFox 40.0.2(观察开发人员网络工具，您可以看到URL加载，但图像不显示) Internet Explorer 11.0.9600.17905 (URL从未加载)

我发现了一个比建议的解决方案更好的方法，但它确实使用了背景图像。 兼容方法(IE6无法确认) 学分:http://www.kryogenix.org/code/browser/lir/

<img src="pathTo/myImage.jpg"/>

CSS:

img[src*="pathTo/myImage.jpg"] {

    background-image: url("mynewimg.jpg"); /* lets say 20x20 */
    width: 20px;

    display:inline-block;
    padding: 20px 0 0 0;
    height: 0px !important;

    /* for IE 5.5's bad box model */
    height /**/:20px;
}

旧的形象不见了，新的形象如预期般出现了。

下面这个简洁的解决方案只适用于webkit

img[src*="pathTo/myImage.jpg"] {

    /* note :) */
    content:'';
    display:inline-block;

    width: 20px;
    height: 20px;
    background-image: url("mynewimg.jpg"); /* lets say 20x20 */

}