CSS3 background-size屬性相容

最後更新：2017-09-04 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：情況 -o font tle assets pos form fill strong

background-size是CSS3新增的屬性，但是IE8以下還是不支援

background-size：contain; // 縮小圖片來適應元素的尺寸（保持像素的長寬比）；
background-size ：cover; // 擴充圖片來填滿元素（保持像素的長寬比）；
background-size ：100px 100px; // 調整圖片到指定大小；

background-size ：50% 100%; // 調整圖片到指定大小，百分比相對於包含元素的尺寸。

瀏覽器安全色：

IE 和遨遊不支援；

Firefox 添加私人屬性 -moz-background-size 支援；

Safari 和 Chrome 添加私人屬性 -webkit-background-size 支援；

Opera 不支援 background-size 屬性，添加其私人屬性 -o-background-size 也不支援。

一、讓IE7 IE8支援CSS3 background-size屬性

　　由於 background-size 是 CSS3 新增的屬性，所以 IE 低版本自然就不支援了，但是老外寫了一個 htc 檔案，名叫 background-size polyfill，使用該檔案能夠讓 IE7、IE8 支援 background-size 屬性。其原理是建立一個 img 元素插入到容器中，並重新計算寬度、高度、left、top 等值，類比 background-size 的效果。

使用方法：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>讓IE7 IE8支援CSS3 background-size屬性</title>    <style>        html {            height: 100%;        }        body {            height: 100%;            margin: 0;            background: url(http://cdn.dowebok.com/139/images/bg.jpg) center no-repeat;            background-size: cover;            -ms-behavior: url(css/backgroundsize.min.htc);            behavior: url(css/backgroundsize.min.htc);        }    </style></head><body></body></html>

局限性

background-size polyfill 雖然可以類比 background-size 屬性，但並不能完全類比，畢竟 background 方式和 img 方式還是有區別的，主要的支援情況如下：

支援

背景映像的正確位置和大小
瀏覽器縮放時及時更新
更新圖片（替換等）時及時更新

不支援

多個背景（多重背景）
4 個值的 background-position
背景重複
非預設值的 background-[clip/origin/attachment/scroll]

由於 background-size polyfill 需要進過複雜的計算，所以可能會出現圖片“一閃”的情況。並且 .htc 檔案還不能跨域，使用 CDN 的需要注意。

雖然 background-size polyfill 有一定的局限性，但總比沒有好，在某些情況下還是一個很好的選擇。

二、讓IE8支援CSS3 background-size屬性

通過濾鏡來實現這樣的一個效果。

    width: 100%;    min-height: 100%;    background: url("../images/map.png") no-repeat;    background-size: 100% 100%;    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(            src=‘file:///E:/idea-project/html/nongkeyuan/assets/images/map.png‘,            sizingMethod=‘scale‘);

註：路徑要是絕對路徑

CSS3 background-size屬性相容

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More