首頁 web前端 js教程 利用jQuery和CSS將背景圖片拉伸_jquery

利用jQuery和CSS將背景圖片拉伸_jquery

May 16, 2016 pm 03:36 PM

現在WEB頁面設計比較流行使用大背景圖,那麼您知道如何使用一張大背景圖進行拉伸效果呢?也就是說使用一張固定尺寸的背景圖片,讓它在頁面中隨著瀏覽器尺寸進行拉伸,就像我們的電腦桌面桌布效果一樣。本文將帶您一起使用jQuery和CSS實現背景圖片拉伸效果。

將背景圖片拉伸,而不是平鋪,注意平鋪效果我們可以使用CSS的background-repeat來實行背景圖片的平鋪效果,本文討論的是背景圖片的拉伸效果。這種效果在一些前衛的頁面設計中已經廣泛應用,尤其在一些獨立頁面,像登錄頁面使用拉伸的背景圖片效果比較常見。
目前有兩種解決方案可以實現背景圖片拉伸效果,一種是CSS,我們可以使用background-size:cover實現圖片的拉伸效果,但是IE8及以下版本不支援background-size,於是我們嘗試使用微軟的濾鏡效果,但IE6不支持,畢竟還有一些後進生在使用IE6。另一個解決方案是使用jQuery,完全解決瀏覽器的相容性問題,還是jQuery威武。
CSS解
我們準備一張背景圖片,任意尺寸的,假設我們要做一個登入頁面,頁面中使用拉升的背景圖。我們只需要在body中加入以下程式碼:

<div id="main"> 
...登录表单 
</div> 
登入後複製

然後CSS這樣寫:

body{background:url(bg.jpg) center center;background-size:cover;height:900px;width:100%; 
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.jpg', sizingMethod='scale');} 
#main{position:absolute; top:50%; left:50%; width:420px; height:250px; 
margin:-125px 0 0 -210px; background:#ffc} 
登入後複製

我們使用background-size實現了背景圖片的拉伸效果,但是要兼容IE7,IE8就需要使用濾鏡filter來實現,注意該方案中,必須指定容器的高度,本例中指定了height:900px。
CSS方案有一定的局限性,必須指定容器高度,IE6不相容,那麼比較完美的解決方案就是使用jQuery了。
jQuery解決方案
我們使用jQuery先向body動態插入一個DIV,並且在DIV中包含一張圖片,也就是我們要求拉伸效果的背景圖片。然後使用jQuery取得瀏覽器視窗的大小,根據瀏覽器視窗大小,動態設定背景圖片的尺寸(寬度和高度)。

$(function(){ 
  $("body").append("<div id='main_bg'/>"); 
  $("#main_bg").append("<img src='bg.jpg' id='bigpic'>"); 
  cover(); 
  $(window).resize(function(){ //浏览器窗口变化 
    cover(); 
  }); 
}); 
function cover(){ 
  var win_width = $(window).width(); 
  var win_height = $(window).height(); 
  $("#bigpic").attr({width:win_width,height:win_height}); 
} 
登入後複製

上述程式碼中,cover()函數就是動態的設定了背景圖片的尺寸,透過jQuery的append方法動態加入背景圖片,當頁面載入完成時已經瀏覽器視窗變化時都能實現背景圖片的拉伸效果,也就是頁面ready和resize都呼叫了cover()函數。

以上兩種解決方案,是否都很滿意?我比較喜歡jQuery解決方案總之希望能幫到大家更好地掌握jQuery和CSS使背景圖片拉伸的技巧。

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱門文章

兩個點博物館:邦格荒地地點指南
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門工具標籤

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

在JavaScript中替換字符串字符 在JavaScript中替換字符串字符 Mar 11, 2025 am 12:07 AM

在JavaScript中替換字符串字符

jQuery檢查日期是否有效 jQuery檢查日期是否有效 Mar 01, 2025 am 08:51 AM

jQuery檢查日期是否有效

jQuery獲取元素填充/保證金 jQuery獲取元素填充/保證金 Mar 01, 2025 am 08:53 AM

jQuery獲取元素填充/保證金

前5個日期操縱JS插件 前5個日期操縱JS插件 Feb 28, 2025 am 12:34 AM

前5個日期操縱JS插件

10值得檢查jQuery插件 10值得檢查jQuery插件 Mar 01, 2025 am 01:29 AM

10值得檢查jQuery插件

10個jQuery手風琴選項卡 10個jQuery手風琴選項卡 Mar 01, 2025 am 01:34 AM

10個jQuery手風琴選項卡

jQuery添加捲軸到Div jQuery添加捲軸到Div Mar 01, 2025 am 01:30 AM

jQuery添加捲軸到Div

自定義Google搜索API設置教程 自定義Google搜索API設置教程 Mar 04, 2025 am 01:06 AM

自定義Google搜索API設置教程

See all articles