CSS+JQUERY 靠山圖滿版的做法＠竹東網站架設

2023-02-10 08:44:03| 人氣16| 回應0 | 上一篇 | 下一篇

CSS+JQUERY 靠山圖滿版的做法

推薦 0 收藏 0 轉貼0 訂閱站台

jQuery

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

複製代碼

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

複製代碼

文章起原

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

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

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

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

markup

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

CSS + 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>

複製代碼

今天我們要跟人人分享幾個製作滿版配景圖的方式。

此刻先來肯定一下我們的需求：

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

利用CSS3 background-size 屬性

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

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

<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>

複製代碼

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

別的，為了要確定配景圖中的扭轉木馬可以呈現在畫面中，我們還要再做一些調整。將背景圖片程度置中，點竄以後的CSS以下：