完美的背景圖全屏css代碼 – background-size:cover?

在寫主題樣式的時候常常會碰到用背景圖鋪滿整個背景的需求，這裏分享下使用方法

須要的效果

1. 圖片以背景的形式鋪滿整個屏幕，不留空白區域
2. 保持圖像的縱橫比（圖片不變形）
3. 圖片居中
4. 不出現滾動條
5. 多瀏覽器支持

以圖片bg.jpg爲例

最簡單，最高效的方法 CSS3.0

歸功於css3.0新增的一個屬性background-size，能夠簡單的實現這個效果，這裏用fixed和center定位背景圖，而後用background-size來使圖片鋪滿，具體css以下

1. html {
2.   background: url(bg.jpg) no-repeat center center fixed;
3.   -webkit-background-size: cover;
4.   -moz-background-size: cover;
5.   -o-background-size: cover;
6.   background-size: cover;
7. }

這段樣式適用於如下瀏覽器

• Safari 3+
• Chrome
• IE 9+
• Opera 10+ (Opera 9.5 支持background-size屬性 可是不支持cover)
• Firefox 3.6+

這裏你會發現ie8及如下版本不支持，這些蛋疼瀏覽器則須要添加下面的css來設置兼容

1. filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.bg.jpg', sizingMethod='scale');
2. -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.jpg', sizingMethod='scale')";

這個用濾鏡來兼容的寫法並非很完美，首先是圖片路徑，這裏只能是相對於根目錄的路徑，或者用絕對路徑；而後是圖片縱橫比改變了，是拉伸鋪滿的形式。儘管如此，總比留空白好多了吧（若是背景圖bg.jpg的寬高夠大，則能夠不用這段，變成簡單的平鋪，比圖片變形效果好寫，你們能夠嘗試下）

 

若是你以爲上面的方法不是很滿意，那試試下面這種

用img形式來實現背景平鋪效果

首先在html中加入如下代碼

1. <img src="bg.jpg" class="bg">

而後經過css來實現鋪滿效果（假設圖片寬度1024px）

1. img.bg {
2.     min-height: 100%;
3.     min-width: 1024px;
4.     width: 100%;
5.     height: auto;
6.     position: fixed;
7.     top: 0;
8.     left: 0;
9. }

下面這個是爲了屏幕小於1024px寬時，圖片仍然能居中顯示（注意上面假設的圖片寬度）

1. @media screen and (max-width: 1024px) {
2.   img.bg {
3.     left: 50%;
4.     margin-left: -512px;
5.   }
6. }

兼容如下瀏覽器

• 如下瀏覽器的全部版本: Safari / Chrome / Opera / Firefox
• IE9+
• IE 7/8: 平鋪效果支持，可是在小於1024px的屏幕下居中效果失效

 

下面再說一種方法

JQ模擬的方法

html部分

1. <img src="bg.jpg" id="bg" alt="">

css部分

1. #bg { position: fixed; top: 0; left: 0; }
2. .bgwidth { width: 100%; }
3. .bgheight { height: 100%; }

js部分

1. $(window).load(function() {
2.     var theWindow        = $(window),
3.         $bg              = $("#bg"),
4.         aspectRatio      = $bg.width() / $bg.height();
5.     function resizeBg() {
6.         if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
7.             $bg
8.                 .removeClass()
9.                 .addClass('bgheight');
10.         } else {
11.             $bg
12.                 .removeClass()
13.                 .addClass('bgwidth');
14.         }
15.     }
16.     theWindow.resize(resizeBg).trigger("resize");
17. });

支持瀏覽器

• 如下瀏覽器的全部版本: Safari / Chrome / Opera / Firefox
• IE7+

 

 

其實我本身通常用的是（由於夠用了，咱不挑/其實上面的都是俺翻譯過來的）

html部分

1. <div class="bg"></div>

css部分

1. .bg{
2.     position: fixed;
3.     top: 0;
4.     left: 0;
5.     width: 100%;
6.     height: 100%;
7.     background: url(bg.jpg) no-repeat #000;
8.     background-size: cover;
9.     z-index: -1;
10. }

若是圖片寬度沒有達到1900px以上，我會加上ie的濾鏡來支持ie8(這裏我故意用了絕對路徑，請知曉，代碼長的我想砸了ie)

1. -ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.http://huilang.me/bg.jpg', sizingMethod='scale')";
2. filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://huilang.me/bg.jpg', sizingMethod='scale');

瀏覽器支持

• ie7+
• 絕大多數主流瀏覽器