background-attachment属性进阶

我就是我 2023-06-12 09:43 13阅读 0赞

前提是定义了background-image属性，然后用background-attachment来指明背景图的位置是固定于视口的，还是随着包含块移动的。可简单理解为定义背景图片随滚动轴的移动方式。

取值：

scroll:默认值，**背景图相对于元素固定**，背景随页面滚动而移动，即背景和内容绑定。

fixed：**背景图相对于视口固定**，所以随页面滚动背景不动，相当于背景被设置在了body上。

local：**背景图相对于元素内容固定**，

inhert:继承，没什么说的。

该属性可以应用于任何元素。

# 一、scroll【背景图滚动】 #

设置background-attachment:scroll,背景图是相对于元素自身固定，内容动时背景图也动。附加到元素的border。

![181332055883234.png][]local

**Note:**

对于scroll，一般情况背景随内容滚动，但是有一种情况例外。

对于可以滚动的元素（设置为overflow:scroll的元素）。当background-attachment设置为scroll时，背景图不会随元素内容的滚动而滚动。

![181355586973756.png][]

# 二、local【滚动元素背景图滚动】 #

对于可以滚动的元素（设置为overflow:scroll的元素）,设置background-attachment:local，则背景会随内容的滚动而滚动。

因为背景图是相对于元素自身内容定位，开始固定，元素出现滚动条后背景图随内容而滚动。

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

![181357412138876.png][]

# 三、fixed:【背景图静止】 #

背景图片相对于视口固定，就算元素有了滚动条，背景图也不随内容移动。

fixed用法如下：

![复制代码][Image 1]

![复制代码][Image 1]

![181317564945031.png][]

或者看mozilla的[demo][]。

这里我要强调一点**我的看法**：

给任何元素的背景图设置background-attachment: fixed;效果都是一样的，都是相对于视口，因为一个网页只有一个视口，该背景和元素已经没关系了，要说有关大概也只是元素不可见则背景图不可见。

而这个视口是什么呢？这里推荐一篇文章[《像素与浏览器视口的细节》][Link 1]

# 四、多背景图background-attachment #

也可以为多个背景图设置background-attachment

body {
        
      background-image: url("img1.png"), url("img2.png");
      background-attachment: scroll, fixed;
    }

# 五、资源链接 #

[w3c background-attachment][]

[像素与浏览器视口的细节][Link 1]

[a table of two viewports][]

[181332055883234.png]: https://images0.cnblogs.com/blog2015/315302/201505/181332055883234.png
[181355586973756.png]: https://images0.cnblogs.com/blog2015/315302/201505/181355586973756.png
[ContractedBlock.gif]: https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif
[181357412138876.png]: https://images0.cnblogs.com/blog2015/315302/201505/181357412138876.png
[Image 1]: 
[181317564945031.png]: https://images0.cnblogs.com/blog2015/315302/201505/181317564945031.png
[demo]: https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment
[Link 1]: http://acgtofe.com/posts/2013/05/pixel-and-viewport/
[w3c background-attachment]: http://www.w3.org/TR/css3-background/#background-attachment
[a table of two viewports]: http://www.quirksmode.org/mobile/viewports.html