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

是程式喵哇發表於2023-05-04
CSS

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

需要的效果

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

以圖片bg.jpg為例

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

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

html {
background: url('../../../resources/images/welcome.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');

 

相關文章