TShopping

 找回密碼
 註冊
搜索
查看: 418|回復: 0

[分享] CSS+JQUERY 背景圖滿版的做法

[複製鏈接]
發表於 2016-4-28 00:31:48 | 顯示全部樓層 |閱讀模式
 
Push to Facebook Push to Plurk Push to Twitter 
2.jpg
今天我們要跟大家分享幾個製作滿版背景圖的方法。

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

圖片必須剛好填滿瀏覽器不能留有縫細,也不能因為圖片太大而出現捲軸。
圖片可以隨著瀏覽器尺寸自動縮放。
圖片必須保持長寬比,不能變形。
要達成上面的需求,我們有以下的方法可以使用


使用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.         @media screen and (max-width: 1000px) {
  16.             img.bg {
  17.                 left: 50%;
  18.                 margin-left: -500px;
  19.             }
  20.         }
  21.     </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.         resize_tab();
  4.     });

  5.     $(window).resize(function () {
  6.         resize_tab();
  7.     }).resize();

  8.     function resize_tab() {

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

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


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

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


  20.         } else {
  21.             $('#bg-img').css({
  22.                 'width': 'auto',
  23.                 'height': '100%',
  24.                 'margin-left': 0 - width / 2,
  25.                 'margin-top': 0 - height / 2
  26.             });
  27.         }
  28.     }
  29. </script>
複製代碼


文章來源

 

臉書網友討論
您需要登錄後才可以回帖 登錄 | 註冊 |

本版積分規則



Archiver|手機版|小黑屋|免責聲明|TShopping

GMT+8, 2016-12-4 07:45 , Processed in 0.060655 second(s), 25 queries .

本論壇言論純屬發表者個人意見,與 TShopping綜合論壇 立場無關 如有意見侵犯了您的權益 請寫信聯絡我們。

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回復 返回頂部 返回列表