close

網頁設計 CSS+JQUERY 佈景圖滿版的做法

網頁設計

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

目下當今先來肯定一下我們的需求：

圖片必需恰好填滿瀏覽器不克不及留有縫細，也不克不及因為圖片太大而泛起捲軸。
圖片可以跟著瀏覽器尺寸自動縮放。
圖片必需連結長寬比，不克不及變形。
要殺青上面的需求，我們有以下的方法可以使用


使用CSS3 background-size 屬性

background-size 是css3 的屬性，用來界說背景圖片的尺寸。利用上可以直接指定長寬的數值或是縮放的比例；指定"contain"可以讓後臺圖片自動縮放到填滿內容區域內的最大尺寸；指定"cover"可讓背景圖片主動縮放到籠蓋內容區域的最小尺寸。可以參考w3c background-size的資訊

因為我們如今要做的是完全覆蓋瀏覽器的佈景圖片，所以要利用”background-size:cover;”這個設定。利用方式如下：
 

  1. <style>
  2.         html {
  3.             height: 100%;
  4.         }
  5.         
  6.         body {
  7.             background-image: url(background.jpg);
  8.             background-repeat: no-repeat;
  9.             background-attachment: fixed;
  10.             background-position: center;
  11.             background-size: cover;
  12.         }
  13.     </style>
複製代碼


利用這個方式我們可以利用background-position指定圖片縮放的中間點。以上面的程式碼為例：佈景圖片會置中對齊，並以圖片中間為縮放的中間點。

若但願圖片靠左下對齊，以左下角為縮放的中間點可以設置成：

   background-position: left bottom;
另外一個純真使用css的方式：

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

markup
 

  1. <body>
  2.     <div class="bg">
  3.         <img src="background.jpg">
  4.     </div>
  5. </body>
複製代碼


css
 

  1. <style>
  2.         .bg {
  3.             position: fixed;
  4.             top: 0;
  5.             left: 0;
  6.             bottom: 0;
  7.             right: 0;
  8.             z-index: -999;
  9.         }
  10.         .bg img {
  11.             min-height: 100%;
  12.             width: 100%;
  13.         }
  14.     </style>
複製代碼


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



另外，為了要肯定背景圖中的扭轉木馬可以泛起在畫面中，我們還要再做一些調劑。網頁設計將背景圖片程度置中，點竄以後的CSS如下：
 

  1. <style>
  2.         .bg {
  3.             position: fixed;
  4.             top: 0;
  5.             left: 0;
  6.             bottom: 0;
  7.             right: 0;
  8.             z-index: -999;
  9.         }
  10.         .bg img {
  11.             min-height: 100%;
  12.             min-width: 1000px;
  13.             width: 100%;
  14.         }
  15.  
  16.         @media screen and (max-width: 1000px) {
  17.             img.bg {
  18.                 left: 50%;
  19.                 margin-left: -500px;
  20.             }
  21.         }
  22.     </style>
複製代碼


上面這個例子只能讓圖片靠上對齊，並以上方作為縮放的中心點。
若是很是對峙要以圖片中間作為縮放的中間點，就要加上jQuery 調劑一下

CSS + jQuery

網頁設計
  1. <body>
  2.     <img src="bg.jpg" id="bg-img">
  3. </body>
  4. <style>
  5.         #bg-img {
  6.             position: fixed;
  7.             top: 50%;
  8.             left: 50%;
  9.             z-index: -99;
  10.         }
  11.     </style>
複製代碼


jQuery
 

網頁設計
  1. <script>
  2.     $(function () {
  3.  
  4.         resize_tab();
  5.     });
  6.  
  7.     $(window).resize(function () {
  8.         resize_tab();
  9.     }).resize();
  10.  
  11.     function resize_tab() {
  12.  
  13.         var viewportWidth = $(window).innerWidth();
  14.         var viewportHeight = $(window).innerHeight();
  15.  
  16.         var width = $('#bg-img').width();
  17.         var height = $('#bg-img').height();
  18.  
  19.  
  20.         if ((viewportWidth / viewportHeight) > (width / height)) {
  21.  
  22.             $('#bg-img').css({
  23.                 'width': '100%',
  24.                 'height': 'auto',
  25.                 'margin-left': 0 - width / 2,
  26.                 'margin-top': 0 - height / 2
  27.             });
  28.  
  29.  
  30.         } else {
  31.             $('#bg-img').css({
  32.                 'width': 'auto',
  33.                 'height': '100%',
  34.                 'margin-left': 0 - width / 2,
  35.                 'margin-top': 0 - height / 2
  36.             });
  37.         }
  38.     }
  39. </script>
複製代碼



文章來曆

arrow
arrow
    文章標籤
    網頁設計
    全站熱搜
    創作者介紹
    創作者 valeritmfov8 的頭像
    valeritmfov8

    苗栗網頁設計

    valeritmfov8 發表在 痞客邦 留言(0) 人氣()