列印出網頁背景圖的方式

有沒有遇見過客戶要求將網頁背景用印表機印出來的? 一般網製作都會盡量將背景圖, 背景色或icon裝飾圖片用css或table放到背景裡當網頁底圖, 只有文字和新聞照片才會放在html. 無法列印背景是瀏覽器的特性, 目的應該是不想干擾文字的呈現.

曾經有二個客戶提到這個問題: 一個比較好解決, 他的目的是希望可以將背景圖印出來做成報告呈給長官看, 但是缺少背景圖的網頁印出來只有文字和線條, 做不成漂亮的報告. 我提議用"螢幕列印"方式拼出頁面圖檔給他印, 但是他希望可以自己想印的時候印, 所以不喜歡這種方法 . 後來是我們的PM告訴他可以調整瀏覽器的設定才解決這個問題.

瀏覽器的設定可以到瀏覽器的"工具 / 網際網路選項 / 進階" 將 "列印色彩的背景及影像" 這選項打勾, 之後再到預覽列印就可以看到背景的顏色和圖片都顯示出來. 於是這位客戶的問題就解決了!


另一個比較麻煩, 我竟然也連做了二期, 和他照面二次. 第一期他希望將頁面中的選單, 標題和條例項目的icon圖都印出來, 可以清楚呈現這些用css做在背景的icon圖示, 例如箭頭, 圓點等. 但是我們知道css只有條列項目(list-style-image)的icon圖可以被印出來, 其他的不行. 所以當他看見用< li >寫的條列項目的圓點圖示可以印出來, 其他用< h >寫的圖示印不出來時, 就很堅持一定要想辦法達成全部印出來的要求. 第一次遇到這麼"盧"的客戶, 和他解釋瀏覽器的特性也沒用, 所以只好將所有icon圖都從背景拿出來放到html才解決這個問題. 這是很笨的方法, 但是笨方法可以解決問題的話也只好用了.

第二期我們又照面了, 一開始他沒提這種要求, 我也決定不再理會他, 直接將圖示都改放到背景. 在轉移舊資料時就發現第一期放在html的icon圖也跟著轉進來, 這是笨方法的下場, 於是上稿的人要比較辛苦的拿掉這些icon圖. 只是果不其然, 最後快要驗收時他又再次提出相同的問題, 但是這次他沒這麼堅持了, 也就得以維持原狀交差. 但是我還是想知道究竟有沒有人有列印背景圖的方法, 於是開始又搜尋Google.

搜尋的結果發現竟然有很多人在討論區問相同的問題, 大多數也都是遇到這種"盧"的客戶在求助的. 在這當中有個天才Andreas提供一個"偏方", 就是運用list-style-image 的特性印出背景圖, 他的example頁面是 Printing CSS background image . 說明頁在Web-Graphics.

他在h1下一個名為id="title"的style, 這組id如下:

#ti\tle { /* 6. */
display: list-item; /* 1. */
list-style-image: url(banner.jpg); /* 2. */
list-style-position: inside; /* 3. */
letter-spacing: -1000em; /* 4. */
font-size: 1pt; /* 5. */
color: #fff; /* 5. */
}

上面的寫法依序說明如下:

1. 將h1的display設為list-item, 以條例項目型態顯示
2. 將list-style-image設為範例網頁中的banner.jpg
3. 這是考慮firefox的設定, 將圖示呈現方式改為"內縮"
4. 讓html上面h1的文字消失, 於是將letter-spacing設為-1000em
5. 但是4. 讓文字消失的方法在Opera沒有作用, 所以再將字級設成1pt並且和背景色同為白色, 這樣在Opera也看不清這些字了.
6. 在title名字加斜線"/" . 因為這方法在IE5和5.5無效, 所以用加斜線方式讓IE5和5.5因為無法辨識這種名稱寫法而不影響樣式呈現. (也就是讓IE5, 5.5以原來無背景圖, 只呈現標題文字的方式顯示)

這種方式只有在IE6, Firefox 1.0 and 1.5 and Opera 8.5有效, 但是這篇文章是在2005年12月25日發表, 所以只測試這些版本的瀏覽器, 但是我在IE7, Firefox2和Netscape8看也是OK的.

多虧這位Andreas想得出這種方法, 我會稱這種方法為"偏方"是因為< h >本來是標題的意思, 在css中改以條例項目型態顯示(list-item)有名不正言不順的嫌疑, 但是真的遇到這種"盧"的客戶也只好用了.

好用的方法介紹給大家參考!