文章彙整

滿版背景圖的製作方法- CSS & jQuery

Astral WebBy Astral Web 3 years agoNo Comments
首頁  /  網站設計與開發  /  滿版背景圖的製作方法- CSS & jQuery

full screen backround image

今天我們要跟大家分享幾個製作滿版背景圖的方法。

現在先來確定一下我們的需求:

  1. 圖片必須剛好填滿瀏覽器不能留有縫細,也不能因為圖片太大而出現捲軸。
  2. 圖片可以隨著瀏覽器尺寸自動縮放。
  3. 圖片必須保持長寬比,不能變形。

要達成上面的需求,我們有以下的方法可以使用

使用CSS3 background-size 屬性

background-size 是css3 的屬性,用來定義背景圖片的尺寸。使用上可以直接指定長寬的數值或是縮放的比例;指定”contain”可以讓背景圖片自動縮放到填滿內容區域內的最大尺寸;指定”cover”可以讓背景圖片自動縮放到覆蓋內容區域的最小尺寸。可以參考w3c background-size的資訊

 

因為我們現在要做的是完整覆蓋瀏覽器的背景圖片,所以要使用”background-size:cover;”這個設定。使用方法如下:

<style>
        html {
            height: 100%;
        }

        body {
            background-image: url(background.jpg);
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-position: center;
            background-size: cover;
        }
    </style>

使用這個方法我們可以利用background-position指定圖片縮放的中心點。以上面的程式碼為例:背景圖片會置中對齊,並以圖片中心為縮放的中心點。

若希望圖片靠左下對齊,以左下角為縮放的中心點可以設置成:

   background-position: left bottom;

另一個單純使用css的方法:

先建立一個區塊填滿瀏覽器視窗,在區塊內放入一張圖片,讓這個圖片保持在完全覆蓋整個區塊的狀態下。

markup

<body>
    <div class="bg">
        <img src="background.jpg">
    </div>
</body>

css

<style>
        .bg {
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            z-index: -999;
        }
        .bg img {
            min-height: 100%;
            width: 100%;
        }
    </style>

實際操作之後我們會發現,當瀏覽器的寬度小於背景圖片原始的寬度時,背景圖片會有變形的情況發生,因為我們要加上min-width: 1000px;來限制背景圖片縮小的比例。其中1000px是背景圖片的原始寬度

 

另外,為了要確定背景圖中的旋轉木馬可以出現在畫面中,我們還要再做一些調整。將背景圖片水平置中,修改之後的CSS如下:

 <style>
        .bg {
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            z-index: -999;
        }
        .bg img {
            min-height: 100%;
            min-width: 1000px;
            width: 100%;
        }

        @media screen and (max-width: 1000px) {
            img.bg {
                left: 50%;
                margin-left: -500px;
            }
        }
    </style>

上面這個例子只能讓圖片靠上對齊,並以上方作為縮放的中心點。

如果非常堅持要以圖片中心作為縮放的中心點,就要加上jQuery 調整一下

 

CSS + jQuery

 

<body>
    <img src="bg.jpg" id="bg-img">
</body>
 <style>
        #bg-img {
            position: fixed;
            top: 50%;
            left: 50%;
            z-index: -99;
        }
    </style>

jQuery

<script>
    $(function () {

        resize_tab();
    });

    $(window).resize(function () {
        resize_tab();
    }).resize();

    function resize_tab() {

        var viewportWidth = $(window).innerWidth();
        var viewportHeight = $(window).innerHeight();

        var width = $('#bg-img').width();
        var height = $('#bg-img').height();


        if ((viewportWidth / viewportHeight) > (width / height)) {

            $('#bg-img').css({
                'width': '100%',
                'height': 'auto',
                'margin-left': 0 - width / 2,
                'margin-top': 0 - height / 2
            });


        } else {
            $('#bg-img').css({
                'width': 'auto',
                'height': '100%',
                'margin-left': 0 - width / 2,
                'margin-top': 0 - height / 2
            });
        }
    }
</script>

 

歐斯瑞有限公司編寫製作

 

 

以上內容由Astralweb 歐斯瑞編寫製作

 100

推薦文章

Category:
  網站設計與開發

留下回應

你的電子郵件地址不會被公開.

取得獨家電子商務祕技

建立更好的策略靈感

跟上全球的網路趨勢

絕佳的電商解決方案

電子商務戰略全指南

每月發送電商戰略指南,只要填寫E-mail即可訂閱!

請到您的信箱確認,即可完成訂閱。