CSS 背景縮放

2   Comments

周末閒著無聊, 玩著 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)
 }

背景自動縮放

Author Summary
CSS 背景縮放
Subject : CSS 背景縮放
Author : - Dream Talker Updated at: 5:45 PM
Votes : 100% - 5.0 - based on 2015
Blogger背景隨視窗自動縮放的CSS語法
5 Stars - Reviews
留言提示 - Comment Tips
◆ 如果您有任何想法或意見，歡迎參與留言。
◆ Disqus匿名留言，信箱及個人資訊不會公開顯示。
◆ 請多使用社群帳號留言，可簡化流程並訂閱回復。
◆ 『私密留言』請使用Google+分享按鍵，留言須使用『@Mark X』在訊息中，以免遺漏通知。
◆ G+ 訊息中指名分享對象的參考文件: 『 說明 』
  • Disqus
  • Blogger
  • Facebook
Anonymous left your nick please
  1. Anonymous12:11 PM

    你好
    請問該怎樣判斷何時用cover，何時用cantain？
    謝謝。

    ReplyDelete
    Replies
    1. Unknown9:56 PM

      cover是較安全的用法, 不會露出底色, 只是不能如你意完整顯示圖面. (因為大家的螢幕大小不一樣).
      1024x768應該要採用cover會比contain好(語法不可像留言一樣打錯字)
      我的建議是橫式, 2:1以內的圖(如1000x500)用contain比較好; 但過於扁長的圖不適合,底下會空出很多底色.

      有個很簡單的判別方法：你在編輯台的模組編輯那裡可以看到即時縮圖, 那是通用標準的顯示. 試幾個背景, 以後就知道多少尺寸最佳.

      Delete

SUBSCRIBE TO POST COMMENTS
Subscribe to:Post Comments( Atom )