參考文章:使用 CSS Sprites 設計網頁但不用 background-image 的技巧
CSS Sprites主要是使用在流量大的網站的一種技巧,因為太多圖片會造成太多的 HTTP Request,因此會使用一張大圖、然後使用background-image加上background-position的方式,來減少 HTTP Request ,一般小型網站其實用不太到。
但設定背景圖其實有一個比較明顯的問題是,列印的時候印不出來。如果背景圖只是用在純裝飾、文字都還有顯示那還好。但如果該背景圖很重要也希望被列印出來,那列印的人得去改印表機的預設設定、而一般人當然不可能會知道這個設定。
因此如果希望圖片是能夠被印的,就要改使用把大張圖片直接置入到html,然後 clip 的方式來設定。我舊的作品集網站上方主要連結有使用這樣的技巧。所以如果預覽列印時,上面煮選單的圖片是可以被印出來的。
但是,這個方法使用在主選單上也許還可以,但如果以中文字來說,要使用再圖片文字上的時候,個人是覺得就不太適用。另外思考一下「為甚麼要列印網頁」?列印網頁的重點應該還是在於要把內容印出來。因此只要對應的文字有被印出來,即使印出來不像螢幕上顯示的那麼漂亮,實際上也是無妨的,因為重要的是資訊。
而且個人是比較偏好純文字的結構,除非這張圖屬於內容的一部分,不然我不太喜歡用置入的方式放到html裡,因為這樣你還得再加上alt去標注,那好像不會比用background的設定好到哪裡去。
因此我自己認為比較好的解法應該是直接設定一組print的css,然後把印不出來圖片的部份的文字都讓他顯示出來,只要可以達到列印的可用性即可。