如何在打印時顯示一個圖像，如果在瀏覽器中查看另一個圖像？

Question

我的網站的標題是由兩個圖像（一個向左浮動，其他右） 一個#header DIV裏面。

它在所有瀏覽器中呈現得非常漂亮，但是當我嘗試打印頁面時，圖像顯示出來，但 div的背景顏色卻不是 。

我該如何解決這個問題？

Answer 1

其實辛西婭，如果你打算做這樣的事情，我會說什麼會最有意義的將使用print-header.gif圖像作爲兩個圖像的來源。

這種方法被稱爲CSS 精靈。您可以使用CSS定位來只能說明你在.header-left和.header-right爲屏幕所需的圖像的部分。要進行打印，您可以展開.header-left以顯示整個圖像並隱藏標頭右側。這意味着你已經在頁面上少了一個<img>並削減HTTP請求（一個用於圖像對三）。

通常情況下，這種方法只能用於背景圖像（這會使您回到步驟1！），但可以使用clip屬性在前景圖像中使用此方法。你的CSS將是沿着線：

screen.css：

div#header { 
    position: relative; 
} 

img.header-left { 
    position: absolute; 
    clip:rect(top, right, bottom, left); 
} 

img.header-right { 
    position: absolute; 
    clip:rect(top, right, bottom, left); 
    top: offset; 
    left: offset; 
} 

print.css：

img.header-left { 
    position: static; 
    clip: auto; 
} 

img.header-right { 
    display: none; 
} 

你的HTML便可設爲

<div id="header"> 
    <img src="/images/print-header.gif" class="header-left" /> 
    <img src="/images/print-header.gif" class="header-right" /> 
</div> 

Answer 2

您可以使用media-query這樣的：

#header { width: 100%; height: 100px; } 

@media screen 
{ 
    #header > #left { background: url("display1.png"); } 
    #header > #right { background: url("display2.png"); } 
} 

@media print 
{ 
    #header > #left { background: url("print.png"); } 
    #header > #right { display: none; } 
} 

，然後插入到HTML：

<div id="header"> 
    <div id="left"></div> 
    <div id="right"></div> 
</div> 

Answer 3

瀏覽器現在已經是經濟，默認情況下，他們沒有打印任何背景色了。

如Firefox瀏覽器的一些讓您管理，但每個用戶設置那是一個。

Answer 4

你可以使用media="print"：

<style type="text/css"> 
#img{background-image:url('img1.jpg');} 
</style> 
<style type="text/css" media="print"> 
#img{background-image:url('img2.jpg');} 
</style> 

但是，如果問題是，瀏覽器不打印背景顏色和你使用Firefox，你可以這樣做：

文件>頁面設置... >格式&選項>選項>打印背景（顏色&圖像）

或

網絡連接refox按鈕>打印...>頁面設置...>格式&選項>選項>打印背景（顏色&圖像）

Answer 5

我找到了解決方案！

我創建了第二個標題圖像，它將兩個原始圖像（加上一點填充到 使它看起來不錯）僅用於打印。

這裏是我得到的圖像，以示對打印，但在其他任何時候是不可見的：

我創建了一個類調用.print-header，在我的主要的style.css我把它就像這樣：

.print-header { display:none } 

在我的print.css我把它就像這樣：

.print-header { display:block !important } 
.header-left { display:none } /* this hides the original left header image when printing */ 
.header-right { display:none } /* this hides the original right header image when printing */ 

然後改變了我的HTML：

<div id="header"> 
    <img src="/images/logo.gif" class="header-left" /> 
    <img src="/images/cta.gif" class="header-right" /> 
    <img src="/images/print-header.gif" class="print-header" /> 
</div> 

，瞧！在瀏覽器中，顯示原始2圖像標題，並在打印時顯示單個圖像標題。