打印網頁時缺少背景圖片

Question

我需要一些關於該主題的幫助：當我打印網頁時，它打印的都很好，但不是背景圖片，所以我的網頁在某些地方分解了。請建議。

問候 喬斯

Answer 1

這是在瀏覽器中的用戶設置。默認情況下，某些瀏覽器不會打印背景圖像。

用戶也可以選擇打印背景圖像，但不能強制使用代碼或標記。

Answer 2

我剛剛遇到同樣的問題。我的標題背景圖像不是在單篇文章上打印，在標題圖像通常顯示的頁面的頂部留下一個很大的白色空白。因此，爲了解決這個問題，我在頁面上直接通過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;} 

您完成了。測試和調整樣式以適應。這樣做還可以讓您完全自定義打印頁面的方式，例如 - 打印時，您現在可以隱藏打印按鈕，菜單項等，並且可以按照常規進行任何樣式的編碼。

希望這會有所幫助。

Answer 3

在您的打印樣式表，你應該使用的東西線沿線的：

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

請注意，您不能使用圖像拼接和更先進的背景定位這種方式，你需要做的是爲每個圖像。

Answer 4

嘗試使用大衛·阿拉貢的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