打印网页时缺少背景图片

我需要一些关于该主题的帮助：当我打印网页时，它打印的都很好，但不是背景图片，所以我的网页在某些地方分解了。请建议。打印网页时缺少背景图片

问候乔斯

来源

2012-01-31 Coder

请提供更多的信息，这是不够的，了解你的问题。 – 2012-01-31 06:33:59

'print'是什么意思？你在使用物理打印机吗？ – onemach 2012-01-31 06:37:52

-1

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

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

来源

2012-01-31 06:37:34 Guffa

不完全如此，请参阅我的答案。 – 2012-06-14 11:55:56

@DavidMulder：我不明白你的意思是不是真的？你所建议的是不使用背景图像，但这并不会改变背景图像的真实性。 – Guffa 2012-06-14 12:06:05

你说的是你不能用代码或标记来强制它，但是list-style-image属性完全*就像**被打印的背景图像（在背后的意思是该元素不像img标签需要特殊的标记），因此强制这些图像**是可能的一些代码（css）。 – 2012-06-14 12:13:18

我刚刚遇到同样的问题。我的标题背景图像不是在单篇文章上打印，在标题图像通常显示的页面的顶部留下一个很大的白色空白。因此，为了解决这个问题，我在页面上直接通过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;}

您完成了。测试和调整样式以适应。这样做还可以让您完全自定义打印页面的方式，例如 - 打印时，您现在可以隐藏打印按钮，菜单项等，并且可以按照常规进行任何样式的编码。

希望这会有所帮助。

来源

2012-04-03 06:05:36 Theorian82

在您的打印样式表，你应该使用的东西线沿线的：

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

请注意，您不能使用图像拼接和更先进的背景定位这种方式，你需要做的是为每个图像。

来源

2012-04-03 10:26:00

有趣的建议。太糟糕了，它不能用于精灵。 – 2013-07-16 13:53:53

@David Mulder，很棒！真的有效！谢谢！！ – 2013-10-22 10:51:20

尝试使用大卫·阿拉贡的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

来源

2012-12-17 11:44:19 Shovan

打印网页时缺少背景图片

回答

相关问题