關(guān)于css中的 background-attachment 屬性詳解
我要評(píng)論1、background-attachment的官方說明
設(shè)置背景圖像是否固定或者隨著頁面的其余部分滾動(dòng)
這句話很簡(jiǎn)潔，簡(jiǎn)潔到我無法去理解，所以我決定用我自己的想法去理解。
2、background-attachment的值
background-attachment有三個(gè)值：
- scroll：背景圖片隨著頁面的滾動(dòng)而滾動(dòng)，這是默認(rèn)的。
- fixed：背景圖片不會(huì)隨著頁面的滾動(dòng)而滾動(dòng)。
- local：背景圖片會(huì)隨著元素內(nèi)容的滾動(dòng)而滾動(dòng)。
3、關(guān)于個(gè)人的理解
大家先來看看我的html代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="div1">
<p>1</p><p>1</p>
<p>1</p><p>1</p>
<p>1</p><p>1</p>
<p>1</p><p>1</p>
<p>1</p><p>1</p>
<p>1</p><p>1</p>
<p>1</p><p>1</p>
<p>1</p><p>1</p>
<p>1</p><p>1</p>
</div>
<div class="div2"></div>
<style>
.div1 {
background-image: url("../img/qier.png");
width: 100px;
height: 400px;
overflow: scroll;
}
.div2{
background-color: white;
width: 100px;
height: 3000px;
}
</style>
</body>
</html>大家可以看見，這個(gè)html里面有兩個(gè)div，第一個(gè)div里面有很多p標(biāo)簽，目的是為了讓overflow:scroll 能起作用，同時(shí)也設(shè)置寬高和一張背景圖片（像素為100*100）。第二個(gè)div，目的為了讓窗口可以滾動(dòng)。
大家也可以直接復(fù)制我的代碼去看看效果。
頁面效果如下：
可以看見，盒子內(nèi)部和窗口都可以滾動(dòng)
3.1、默認(rèn)值 scroll
背景圖片隨著頁面的滾動(dòng)而滾動(dòng)
當(dāng)我們滾動(dòng)div里面的滾動(dòng)條時(shí)，發(fā)現(xiàn)圖片不會(huì)動(dòng)
而當(dāng)我們滾動(dòng)窗口的滾動(dòng)條時(shí)，發(fā)現(xiàn)圖片會(huì)跟著動(dòng)
這就是 background-attachment:scroll 的效果
3.2、fixed
背景圖片不會(huì)隨著頁面的滾動(dòng)而滾動(dòng)
我們給予div background-attachment:fixed 屬性
.div1 {
background-image: url("../img/qier.png");
width: 100px;
height: 400px;
overflow: scroll;
background-attachment: fixed;
}我們保存刷新頁面，然后繼續(xù)進(jìn)行上面的操作
當(dāng)我們滾動(dòng)div里面的滾動(dòng)條時(shí)，發(fā)現(xiàn)圖片還是不會(huì)動(dòng)。
而當(dāng)我們滾動(dòng)窗口的滾動(dòng)條時(shí)，發(fā)現(xiàn)圖片不會(huì)跟著動(dòng)，而是固定在窗口一樣
這就是 background-attachment:fixed 的效果
3.3、local
背景圖片會(huì)隨著元素內(nèi)容的滾動(dòng)而滾動(dòng)
我們給予div background-attachment:local 屬性
.div1 {
background-image: url("../img/qier.png");
width: 100px;
height: 400px;
overflow: scroll;
background-attachment: local;
}我們保存刷新頁面，然后繼續(xù)進(jìn)行上面的操作
當(dāng)我們滾動(dòng)div里面的滾動(dòng)條時(shí)，發(fā)現(xiàn)圖片會(huì)跟著動(dòng)。
而當(dāng)我們滾動(dòng)窗口的滾動(dòng)條時(shí)，發(fā)現(xiàn)圖片也會(huì)跟著動(dòng)
這就是 background-attachment:local 的效果
4、個(gè)人總結(jié)
background-attachment的值，以及相對(duì)于的效果相信大家已經(jīng)感受到了，實(shí)踐出真知，動(dòng)手操作一遍就懂了。
在日常的使用中，還是background-attachment:fixed 使用的最多，因?yàn)檫@個(gè)屬性更多的時(shí)候是跟background-image等 背景相關(guān)的屬性一起使用，目的更多的是設(shè)置背景圖，而一般背景圖是固定的，不會(huì)隨窗口的滾動(dòng)而滾動(dòng)，就像是“鑲”在窗口的一樣，所以background-attachment:fixed 是我學(xué)習(xí)和工作以來使用最多的，而其他的幾乎沒有使用的機(jī)會(huì)（也可能是我個(gè)人的接觸有限）。
到此這篇關(guān)于關(guān)于css中的 background-attachment 屬性詳解的文章就介紹到這了,更多相關(guān)background-attachment 屬性內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
css background-attachment屬性進(jìn)階
前提是定義了background-image屬性，然后用background-attachment來指明背景圖的位置是固定于視口的，還是隨著包含塊移動(dòng)的?？珊?jiǎn)單理解為定義背景圖片隨滾動(dòng)軸的移動(dòng)方式2017-03-08css 背景固定樣式background-attachment屬性基礎(chǔ)
這篇文章主要為大家介紹了在CSS中，使用背景附件屬性background-attachment可以設(shè)置背景圖像是隨對(duì)象滾動(dòng)還是固定不動(dòng),需要的朋友可以參考下2017-03-08