實現body背景拉伸自適應 相容chrome ie7,8,9.ie6未測試

xusir發表於2013-06-28
Chrome
        html, body
        {
/*此部分支援chrome，應該也支援firefox*/
            background: rgb(246,248,249);
            background: url('/styles/images/bg.jpg') no-repeat center fixed;
            background-attachment: fixed;
            background-size: 100% 100%;
/*以下是IE部分，使用濾鏡*/
            filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/styles/images/bg.jpg',sizingMethod='scale');
            background-repeat: no-repeat;
            background-positon: 100%, 100%;
            font: normal 12px tahoma, arial, verdana, sans-serif;
            margin: 0;
            padding: 0;
            border: 0 none;
            overflow: hidden;
            height: 100%;
        }

說明：

在物件容器邊界內，在物件的背景和內容之間顯示一張圖片。並提供對此圖片的剪下和改變尺寸的操作。如果載入的是PNG(Portable Network Graphics)格式，則0%-100%的透明度也被提供。

語法：

filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=\'#\'" )

enabled： 可選項。布林值(Boolean)。設定或檢索濾鏡是否啟用。
true：預設值。濾鏡啟用。 
false：濾鏡被禁止。

sizingMethod： 可選項。字串(String)。設定或檢索濾鏡作用的物件的圖片在物件容器邊界內的顯示方式。
crop：剪下圖片以適應物件尺寸。 
image：預設值。增大或減小物件的尺寸邊界以適應圖片的尺寸。 
scale：縮放圖片以適應物件的尺寸邊界。

src： 必選項。字串(String)。使用絕對或相對 url 地址指定背景影象。假如忽略此引數，濾鏡將不會作用。

相關文章