Tool Pages

CSS 背景縮放

周末閒著無聊, 玩著 Google Webmaster Tools 和奇摩站長工具.
忽然注意到 "背景隨視窗縮放" 這個關鍵字出現很頻繁. 印象中我只曾在網誌裡隨口提到一句, 並沒有寫過修改CSS的方法. 居然被搜尋引擎列為關鍵字.
真是對不起那些搜尋到我部落格的訪客! 我想他們沒有找到任何解答, 心裡應該咒罵著：這是什麼鬼東西啊?!
Devil Mark says：自己不留言提問, 怪誰啊?!
我再怎麼懶得打字; 也是有小小的羞恥心的.
為了不讓訪客造太多口業, 寫了這一篇當作修改背景縮放的參考.

這裡使用的是CSS3 background-size 這個屬性. 因為各式瀏覽器的新版都朝向CSS3的規格, 舊式的" sizingMethod='scale' "用法就不寫出來了.
先瞧瞧基本的屬性認識.

如果想要背景圖符合原始尺寸, 就使用 "background-size:auto" 這樣的定義.
可是我們不知道每台電腦螢幕顯示的狀況, 希望背景圖填充滿版. 這時候使用 "background-size:cover" 這樣的定義. 無論另一部電腦的螢幕大小, 總是按比例放大, 讓長度或寬度其中一方延展到整個視窗. (視窗裡不見得是完整的)
注意圖片的原始圖檔品質, 避免放大後會模糊; 品質太清晰, 缺點也會曝光.

-moz-background-size:cover;
-webkit-background-size:cover;
-o-background-size:cover;
background-size:cover;

另一種是圖片的長或寬符合視窗滿版. 將視窗縮放後仍然可見完整的背景圖樣.
使用 "background-size:contain" 定義. 

-moz-background-size:contain;
-webkit-background-size:contain;
-o-background-size:contain;
background-size:contain;

* 修改Blogger背景
打開後台設計, 修改模版HTML. 在<head>的裡面找到" body{ } "的位置, 約在 "<![CDATA[" 或 "Variable definitions"下方. 類似以下語法.

<![CDATA[
body{min-width:$(content.width)}
或
/* Content
----------------------------------------------- */
body {
font:$(body.font);color:$(body.text.color);background:$(body.background)
}

將以下CSS插入 body{ } , 即可讓背景隨視窗自動縮放. 

-moz-background-size:contain;-webkit-background-size:contain;-o-background-size:contain;background-size:contain;

橫式圖樣選用contain較適合縮放, 範例如圖示：

body {-moz-background-size:contain;-webkit-background-size:contain;-o-background-size:contain;background-size:contain;min-width:$(content.width)
 }

背景自動縮放