[技研]列印出網頁背景的方式~
這個問題很多人都遇過,對很多網頁設計師來說也都是一個頭痛且煩人的困擾,在Jane's的Blog中提供了一種可列印出網頁背景的方式,是採用修改Browser設定的方式,但是若是每遇到一次就要告知客戶一次這種做法,實在很辛苦,基於人性化的設計來說,讓客戶不用思考就能使用,且我們若是能在客戶遇到這個問題之前就把它解決掉的話,我想這裡提供另一項個人認為尚為可行的做法。
做法主要是採用 @media print{ } 來製作,將圖片設定在CSS中為背景,而HTML中也插入相同的圖片,並利用CSS將HTML中的圖片使用CSS的絕對定位拉到畫面外隱藏起來,而列印時則讓圖片顯示出來,如此就可達到省頻寬並且在列印時可已被列印出來的目的了。
相關Code
Html
<h1><img src="titleImg.jpg"><span>Page Title </span></h1>
Css
/*-------以下是螢幕顯示時專用的CSS-------*/
h1{
position:relative;
background: url(titleImg.jpg) no-repeat 0 0;width:800px;
height:300px;}
h1 img {
position: absolute;
left: -5000px;}h1 span{
position:absolute;
z-index:100;
left:70px;
top:20px;}
/*-------以下是給列印時專用的CSS-------*/
@media print {
h1{
overflow:hidden;/*讓圖片不會把H1寬度撐開*/}
h1 img{
position: relative;left:0;}
}
實際範例
此範例使用900px X 500px的圖片測試
留言