2015-02-12 84 views
1

我在我的HTML頁面中使用了一個容器,在這裏我使用了背景圖片。 我想在背景圖片上放一些文字,然後打印出來。 但是當我使用:背景圖片沒有打印

<A HREF="javascript:window.print()">Print</A> 

我不明白我的背景圖片都沒有。 這是我的代碼:

<html> 
<head> 
<link href="style.css" rel="stylesheet" type="text/css" /> 
</head> 
<body > 
<div id="headerbg"> 
<h1><p>DATA</h1> 
</div> 
<div id="container"> 
    <p id="address"> 
    adress is XYZ 
    </p> 
    <p id="ward"> 
    Ward is 7 
    </p> 
</div> 
<A HREF="javascript:window.print()">Print</A> 
<div id="footer"> 
</div> 
</body> 
</html> 

我使用的CSS是:

#headerbg { 
    background:#E8E8E8; 
    text-align:center; 
    height: 80px; 
    } 

#headerbg p{ 
    margin: 0; 
    position: absolute; 
    top: 5%; 
    left: 40%; 
    margin-right: -50%; 
    } 
#container 
{ background-image: url("notice.jpg"); 
    height:680px; 
    width:1000px; 
    background-repeat: no-repeat; 
    margin-top:10px; 
    margin-left:390px; 
    position:relative; 
} 

#address 
{ 
    z-index:100; 
    position:absolute;  
    color:black; 
    font-size:19px; 
    left:10px; 
    top:225px; 
} 

我怎樣才能讓我的背景圖片打印?請幫幫我!

+0

嘗試使用內嵌樣式#container?沒有使用風格類? – 2015-02-12 09:11:04

+0

如果您使用的是Windows 7,當出現打印對話框時,在選項「顏色」下面會出現一個名爲「更多設置」的選項。點擊它,你會看到一個名爲'Background Graphics'的複選框。勾選它,你會看到背景圖片。 – 2015-02-12 09:24:22

+0

只是簡單的!非常感謝你:))))@Prera​​kSola – 2015-02-12 09:28:17

回答

0

如果您使用的是Windows 7,當出現打印對話框時,在選項下面有一個選項。點擊它,你會看到一個名爲Background Graphicscheck box。勾選它,你會看到背景圖片。

另外,Chrome和Safari瀏覽器,你可以添加在你的CSS如下:

@media print 
{ 
    * {-webkit-print-color-adjust:exact;} 
} 

這將打印background image即使在打印對話框中未選中的選項。不幸的是,用戶需要手動選擇打印背景圖像的選項(例如,對於使用IE 9,10和11的用戶,他們必須點擊齒輪圖標 - >打印 - >頁面設置,然後激活該選項)

1

添加介質打印:

<link rel="stylesheet" href="" media="print"/> 

,或者你可以在CSS設置,如:

@media print { 
body { 
    content:'url(../imagez.png)'; 
    } 
} 

注:有的IE沒有被使用時,您可以使用:

@import 'style.css' print; 
+0

背景圖像仍然沒有在打印預覽中出現:( – 2015-02-12 09:15:42

+0

非常抱歉,我誤解了你的問題,我編輯了幾分鐘 – 2015-02-12 09:22:32

+0

我已經編輯它 – 2015-02-12 09:34:08