根據canius(http://caniuse.com/#search=background-size),background-size相容性為IE9以及以上瀏覽器,如下圖所示。
實例程式碼:
<!doctype html> <html> <head> <meta charset="UTF-8" /> <title>background-size 兼容性处理</title> <style type="text/css"> * { margin: 0; padding: 0; } .parent { width: 400px; height: 400px; margin: 100px; border: 1px solid red; background: url(img/aaa.jpg) no-repeat center center; background-size: 100% 100%; } </style> </head> <body> <div> </div> </body> </html>
效果:
(1)chrome瀏覽器:
(2)IE8瀏覽器:
使用filter屬性:
.parent { width: 400px; height: 400px; margin: 100px; border: 1px solid red; background: url(img/aaa.jpg) no-repeat center center; background-size: 100% 100%; /*下一行为关键设置*/ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/aaa.jpg', sizingMethod='scale'); }
IE8瀏覽器效果:
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )
enabled:可選項。布林值(Boolean)。設定或檢索濾鏡是否已啟動。 true:預設值。濾鏡啟動。 false:濾鏡被禁止。
sizingMethod:可選項。字串(String)。設定或擷取濾鏡作用的物件的圖片在物件容器邊界內的顯示方式。 crop:剪切圖片以適應物件尺寸。 image:預設值。增大或減少物件的尺寸邊界以適應圖片的尺寸。 scale:縮放圖片以適應物件的尺寸邊界。
src:必選項。字串(String)。使用絕對或相對 url 位址指定背景圖像。如果忽略此參數,濾鏡將不會作用。
以上是解決background-size IE8相容方案實例的詳細內容。更多資訊請關注PHP中文網其他相關文章!