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