css样式（页面背景的其他属性）

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第13天，点击查看活动详情

前两天的学习了页面背景的添加和背景大小的设置，今天学习页面背景的其他属性。

继续使用雪花图片做背景

页面背景跟着鼠标滚动or不动

昨天提到在浏览器页面进行缩放时，使用属性值 cover 和 contain的区别，在页面内容较多，需要滚动鼠标才能浏览完页面的时候，页面背景也会有两种情况。

这里就要用到一个和背景有关的属性：background-attachment

当属性值为 fixed 的时候，页面背景相对于页面保持不动。像大部分网页一样，当滚动鼠标的时候，可以浏览到当前页面以下的文字，但是页面背景仍然是在原来的位置不变。

当属性值为 scroll 的时候，页面背景会随着鼠标滚动而滚动，整个背景图片会进行上下左右的平铺来占满整个选择器，得到下面的图片效果。

页面背景属性的简便写法

前面几篇文章共介绍了五个和页面背景有关的属性：

   1. background-color（控制页面背景颜色默认白色）
   2. background-image（需要`一个width和一个height`或者`一个有默认宽高的选择器，比如：body`才能显示）
   3. background-repeat
   4. background-position 
   5. background-attachment （相对于整个页面而言的）

这五个属性可以简写为 background 属性，在属性值的位置书写上方五个属性的属性值，各个属性值之间用空格隔开即可。可以只书写一个属性值，属性值的书写顺序没有限制。

注意： background-image与background-color同时出现时，不论出现的先后顺序只展示background-image的属性值样式。

到这里使用css属性对页面背景设置的方法就介绍结束了~