[技研]列印出網頁背景的方式~

這個問題很多人都遇過，對很多網頁設計師來說也都是一個頭痛且煩人的困擾，在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的圖片測試

範例網頁連結