iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 21
7
Modern Web

金魚都能懂的CSS必學屬性系列 第 21

Background-attchment- 金魚都能懂的CSS必學屬性

background-attachment 主要用途是設定背景圖片位置的捲動或固定,看起來很像是 background-position 對吧?但他實際上是設定你捲動時背景圖的位置是否改變的一種屬性

background-attachment: scroll;

這個屬性說實在的,其實不太能算是一個金魚必學的屬性,但由於目前有太多的商業樣版網站,利用到這個屬性去做簡易的視差捲動效果,炫的讓人愛到不要不要的,導致 Amos 不得不介紹一下。

background-attachment 可以設定的值是關鍵字,主要設定的關鍵字有以下幾個

  • scroll
  • fixed
  • local

其中 background-attachment: local; 是比較少人見到的,而 fixed 則是大家超愛的!就讓我們繼續看下去吧。

接下來的示範會以內部區塊為主,讓大家看該屬性值的效果

做測試的原始碼則會如下

HTML

<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil adipisci eligendi aliquam natus officia quibusdam, in omnis alias odio. Ad fugiat quas voluptatum tempore tenetur necessitatibus delectus beatae! Quia, libero.</p>
  <!-- 上面段落請複製30個-->
</div>

<!-- 以下段落也請複製30個-->
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil adipisci eligendi aliquam natus officia quibusdam, in omnis alias odio. Ad fugiat quas voluptatum tempore tenetur necessitatibus delectus beatae! Quia, libero.</p>

CSS

body{
  background-image: url("https://ithelp.ithome.com.tw/upload/images/20201004/20112550D2xNzTMb4R.png");
  background-repeat: no-repeat;
  background-attachment: scroll;
}
div{
  width: 900px;
  height: 500px;
  border:5px solid gray;
  margin: 70px;
  overflow: auto;
  background-color: #ffc;
  background-image: url("https://ithelp.ithome.com.tw/upload/images/20201004/20112550D2xNzTMb4R.png");
  background-repeat: no-repeat;
  background-attachment: scroll;
}

呈現畫面預覽

https://ithelp.ithome.com.tw/upload/images/20201006/20112550zDKyLynOft.png

Scroll 跟著捲走了

背景圖常見的就是當你的頁面上下捲動時,背景圖片也會跟著捲動離開所見範圍,scroll 就是這樣的一個作用,且瀏覽器預設使用的 background-attachment 值,也是 scroll,但須要特別注意的是,當你的子區塊(畫面中淺黃色區域),也是使用了 background-attachment: scroll 時,該區塊內部的卷軸捲動,將不會讓背景圖跟著被捲走,這部分你可以把 background-attachment 的觀念拆成兩部分來看,scroll 基本上會根據「視窗的捲軸」來捲動,所以當我今天內部物件的捲軸捲動時,該物件內部的背景圖片是不會被捲走的,就像下圖所示

示意圖

這樣的效果就像是內部的區塊背景被 fixed 在該區塊內了,對於要做區塊內的背景固定,算是一個不錯的設定方式,以上設定效果,各位也可以參考這邊的原始碼畫面 https://jsfiddle.net/p8tgrces/1/

Fixed 固定你的背景圖不要滾動

background-attachment: fixed; 時,你的背景將會使用視窗可見範圍(viewport)當作定位空間,所以一旦設定了 fixed 之後,你的圖片位置就會跑到預設的視窗左上角去了,但請注意,淺黃色區塊內的圖片雖然位置跑到視窗左上角去,但超過區塊空間範圍以外的部分,是看不到的喔,你看到的其實是 body 標籤內的背景圖,千萬別誤會了!

示意圖

以上設定效果,各位也可以參考這邊的原始碼畫面 https://jsfiddle.net/p8tgrces/2/

Local 是甚麼我沒看過

background-attachment: local; 應該是許多人比較少見,且較少使用到的一個關鍵字了(至少 Amos 不常用到它),它的特性比較像是 scroll 的狀況,但是 local 所看的空間是背景圖片的所在空間,所以各位可以看到下所示,背景圖片會「跟著所在空間的捲軸」捲走,所以可以看到內部的淺黃色區塊捲動捲軸時,該區塊的背景圖就會跟著被捲走。

示意圖

以上設定效果,各位也可以參考這邊的原始碼畫面 https://jsfiddle.net/p8tgrces/3/

最常見的簡易版視差捲動

目前有許多的商業樣版網站,都會做簡易的是差捲動效果,為何會說簡易?因為他就只是利用 background-attachment: fixed; 來將背景圖片固定,背景圖其實沒有視差的些微移動,只是露出背景罷了,簡單來看一下示範的原始碼

HTML

<div class="section topic1">topic1</div>
<div class="section topic2">topic2</div>
<div class="section topic3">topic3</div>
<div class="section topic4">topic4</div>
<div class="section topic5">topic5</div>
<div class="section topic6">topic6</div>

CSS

*{
	margin: 0;
	padding: 0;
	list-style: none;
}
.section{
	width: 100%;
	height: 100vh;
	background-color: #666;
	color: #fff;
	font-size: 200px;
	line-height: 100vh;
	text-align: center;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	background-attachment: fixed;
}
.topic1{ 
	background-image: url("background-attachment-05.jpg"); 
}
.topic3{ 
	background-image: url("background-attachment-06.jpg"); 
}
.topic5{ 
	background-image: url("background-attachment-07.jpg"); 
}

呈現效果

示意圖

以上設定效果,各位也可以參考這邊的原始碼畫面 https://codepen.io/bad_printer/pen/MWegOLp


「金魚都能懂的CSS選取器」已集結成書,並於書中添加一些新篇章及細節補充,有興趣的朋友可至天瓏書局選購,感謝各位支持
購書連結 https://www.tenlong.com.tw/products/9789864344994?list_name=b-r30-zh_tw
https://ithelp.ithome.com.tw/upload/images/20200917/20112550bxAFk2frMp.jpg
讓我們好好善用CSS選取器吧


金魚都能懂的教學系列

鐵人雙主題挑戰中,歡迎訂閱一波

金魚都能懂的Bootstrap5網頁框架開發

立刻訂閱 CSS可樂的網站/頻道享受精彩文章

Line搜尋「@CSScoke」加入CSS可樂公開帳號,可以收到 Amos 第一手資訊喔
CSS 可樂部落格
CSS coke 的 Youtube 直播頻道
快按此訂閱 CSS coke 的頻道接收最新教學
/images/emoticon/emoticon12.gif


上一篇
Background-size- 金魚都能懂的CSS必學屬性
下一篇
Background - 金魚都能懂的CSS必學屬性
系列文
金魚都能懂的CSS必學屬性31
0
King Tzeng
iT邦新手 4 級 ‧ 2020-10-06 18:00:23

視差整個超實用!!感謝教學!!/images/emoticon/emoticon34.gif

0
akichun
iT邦新手 5 級 ‧ 2020-10-08 10:48:58

一直誤以為視差一定要用JQ才寫的出來,原來用CSS也行喔!強強der

0
TerryYu
iT邦新手 5 級 ‧ 2020-10-08 11:12:48

真的超實用
原來是這樣做
之前看到視差網頁都畏懼三分

0
wrxue
iT邦新手 1 級 ‧ 2020-11-05 16:57:10

感謝教學

我要留言

立即登入留言