TShopping
標題:
CSS+JQUERY 背景圖滿版的做法
[打印本頁]
作者:
woff
時間:
2016-4-28 00:31
標題:
CSS+JQUERY 背景圖滿版的做法
2.jpg
(194.83 KB, 下載次數: 6)
下載附件
保存到相冊
2016-4-28 00:30 上傳
今天我們要跟大家分享幾個製作滿版背景圖的方法。
現在先來確定一下我們的需求:
圖片必須剛好填滿瀏覽器不能留有縫細,也不能因為圖片太大而出現捲軸。
圖片可以隨著瀏覽器尺寸自動縮放。
圖片必須保持長寬比,不能變形。
要達成上面的需求,我們有以下的方法可以使用
使用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>
複製代碼
文章來源
歡迎光臨 TShopping (http://www.tshopping.com.tw/)
Powered by Discuz! X3.2