打印网页时缺少背景图像

Background images missing while printing a webpage

本文关键字：背景 图像 网页 打印      更新时间：2023-09-26

我需要一些关于这个主题的帮助：当我打印网页时，它打印得很好，但没有打印背景图像，所以我的页面在某些地方会破裂。请提出建议。

问候Jos

在打印样式表中，您应该使用以下内容：

.background {
  display: list-item;
  list-style-image: url(image.gif);
  list-style-position: inside;
}

请注意，你不能用这种方式使用图像精灵和更高级的背景定位，你需要对每个图像都这样做。

我刚刚遇到了同样的问题。我的标题背景图像没有打印在单篇文章上，在标题图像通常显示的页面顶部留下了一个大的白色间隙。因此，为了解决这个问题，我通过HTML直接在页面上添加了背景图像——默认情况下，用户浏览器会打印该图像。以下是如何实现这一目标的基本示例：

1，创建一个空白样式表，并将其命名为print.css。现在将此样式表添加到页眉中，并确保media="print"。我们需要这个来告诉浏览器我们想要和不想要打印哪些元素：

<link rel="stylesheet" href="pathtoyour/css/print.css" type="text/css" media="print" />

2，将您想要打印的图像添加到页面中，并确保它有ID，这样我们就可以在print.css和您的主样式表中对其进行样式设置：

<div id="header">    
<img id="print-image" src="pathtotheimageyouwanttoprint.jpg"/></div>
</div>

3，在主样式表中，添加图像ID，这样我们就可以告诉浏览器在正常查看页面时停止显示图像：

#print-image {display:none}

4、在您的print.css样式表中，因为我们已经告诉您的图像不要显示在主样式表中了，所以我们现在需要确保您的图像打印出来并且不会被隐藏。添加以下内容以实现此目的：

#print-image {display:block;}

你完了。测试并调整造型以适应。

这样做还可以让你完全自定义页面的打印方式，例如，在打印时，你现在可以隐藏打印按钮、菜单项等，并可以按照正常方式以任何样式进行编码。

希望这能有所帮助。

尝试使用David Aragon的Javascript

function replaceSprite(selector){
if ($.browser.msie == true) {
    var back_x = $(selector).css('background-position-x'),
        back_y = $(selector).css('background-position-y'),
        back_position = back_x+" "+back_y;
} else {
    var back_position = $(selector).css('background-position');
}
var back_image = $(selector).css('background-image'),
    width = $(selector).width(),
    height = $(selector).height(),
    index1 = back_image.indexOf('http'),
    index2 = back_image.indexOf('.png');
back_position = back_position.split(" ");
back_image = back_image.substring(index1, (index2+4));
$(selector)
        .append('<img src="'+back_image+'"/>')
    .css('width',width)
    .css('height',height)
    .css('overflow','hidden');
$(selector).find('img')
    .css('margin-left',back_position[0])
    .css('margin-top',back_position[1]);

}

http://quickleft.com/blog/printing-css-sprites

这是浏览器中的一个用户设置。默认情况下，某些浏览器不会打印背景图像。

用户也可以选择打印背景图像，但不能用代码或标记强制打印。

相关文章：