方法一：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=9;IE=8;IE=7;IE=EDGE">
<title></title>
<style> *{ margin:0; padding:0;
} html,body{ width: 100%;height: 100%;
} body{ background: url(allnormal.png); background-size: 100% 100%; background-position: center center; overflow: auto;
}
</style>
</head>
<body>
</body>
</html>
方法二：在低版本的ie中
#div { width: 100%; height:100%; background:url('/assets/p-default/images/act/a.png') no-repeat; background-size:100% 100%; position: relative; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/assets/p-default/images/act/a.png', sizingMethod='scale');
}
問題一：在低版本的ie中，如果圖片過大，在屏幕中只能顯示部分圖片
解決：
#div { width: 100%; height:100%; background:url('/assets/p-default/images/act/a.png') no-repeat; background-size:100% 100%; position: relative; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/assets/p-default/images/act/a.png', sizingMethod='scale'); -ms-behavior: url('/assets/p-default/css/backgroundsize.min.htc'); behavior: url('/assets/p-default/css/backgroundsize.min.htc');
}
backgroundsize.min.htc，這個是一個國外大牛寫的文件，下載地址：
http://www.dowebok.com/139.html 或者 https://github.com/yangshengquan87/ie7.git
上面的兩種方法不夠完美，圖片容易拉伸，造成圖片上的文字的效果很難看
下面的方法徹底解決問題：
我們需要的效果是
- 圖片以背景的形式鋪滿整個屏幕，不留空白區域
- 保持圖像的縱橫比（圖片不變形）
- 圖片居中
- 不出現滾動條
- 多瀏覽器支持
以圖片bg.jpg為例
最簡單，最高效的方法 CSS3.0
歸功於css3.0新增的一個屬性background-size，可以簡單的實現這個效果，這里用fixed和center定位背景圖，然后用background-size來使圖片鋪滿，具體css如下
html { background: url(bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;
}
這段樣式適用於以下瀏覽器
- Safari 3+
- Chrome
- IE 9+
- Opera 10+ (Opera 9.5 支持background-size屬性 但是不支持cover)
- Firefox 3.6+
這里你會發現ie8及以下版本不支持，這些蛋疼瀏覽器則需要添加下面的css來設置兼容
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.bg.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.jpg', sizingMethod='scale')";
這個用濾鏡來兼容的寫法並不是很完美，首先是圖片路徑，這里只能是相對於根目錄的路徑，或者用絕對路徑；然后是圖片縱橫比改變了，是拉伸鋪滿的形式。盡管如此，總比留空白好多了吧（如果背景圖bg.jpg的寬高夠大，則可以不用這段，變成簡單的平鋪，比圖片變形效果好寫，大家可以嘗試下）
如果你覺得上面的方法不是很滿意，那試試下面這種
用img形式來實現背景平鋪效果
首先在html中加入以下代碼
<img src="bg.jpg" class="bg">
然后通過css來實現鋪滿效果（假設圖片寬度1024px）
img.bg { min-height: 100%; min-width: 1024px; width: 100%; height: auto; position: fixed; top: 0; left: 0;
}
下面這個是為了屏幕小於1024px寬時，圖片仍然能居中顯示（注意上面假設的圖片寬度）
@media screen and (max-width: 1024px) { img.bg { left: 50%; margin-left: -512px;
} }
兼容以下瀏覽器
- 以下瀏覽器的所有版本: Safari / Chrome / Opera / Firefox
- IE9+
- IE 7/8: 平鋪效果支持，但是在小於1024px的屏幕下居中效果失效
下面再說一種方法
JQ模擬的方法
html部分
<img src="bg.jpg" id="bg" alt="">
css部分
#bg { position: fixed; top: 0; left: 0; } .bgwidth { width: 100%; } .bgheight { height: 100%; }
js部分
$(window).load(function() { var theWindow = $(window), $bg = $("#bg"), aspectRatio = $bg.width() / $bg.height(); function resizeBg() { if ( (theWindow.width() / theWindow.height()) < aspectRatio ) { $bg .removeClass() .addClass('bgheight'); } else { $bg .removeClass() .addClass('bgwidth'); } } theWindow.resize(resizeBg).trigger("resize"); });
支持瀏覽器
- 以下瀏覽器的所有版本: Safari / Chrome / Opera / Firefox
- IE7+
其實我自己一般用的是（因為夠用了，咱不挑/其實上面的都是俺翻譯過來的）
html部分
<div class="bg"></div>
css部分
.bg{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: url(bg.jpg) no-repeat #000; background-size: cover; z-index: -1;
}
如果圖片寬度沒有達到1900px以上，我會加上ie的濾鏡來支持ie8(這里我故意用了絕對路徑，請知曉，代碼長的我想砸了ie)
-ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.http://huilang.me/bg.jpg', sizingMethod='scale')";
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://huilang.me/bg.jpg', sizingMethod='scale');
瀏覽器支持
- ie7+
- 絕大多數主流瀏覽器
本文轉載：https://blog.csdn.net/dabao87/article/details/83186148