最近一次需求中对于background相关的一些属性使用较多，总结下，希望提高下次的开发效率
background属性
- background-color
- background-image
- background-position
- background-size
- background-repeat
- background-origin
- background-clip
- background-attachment
一. background-color
没啥好说的，应该不会有人没有过吧
- 默认值：transparent
- 可取值：色彩值
-
元素背景的范围：这种颜色会填充元素的内容、内边距和边框区域
-
层级：background-image背景层级更高，会盖住background-color
元素背景范围可以通过属性 调整
二. background-image
- 可取值：图片路径
-
背景的范围：从内边距开始填充背景
background-image其实是从内边距开始填充，是因为background-origin的默认值是padding-box，可以改变的
三. background-position
-
作用：设置背景图像的起始位置
-
可取值
| 取值 |
含义 |
| Xpx Ypx |
第一个值是水平位置，第二个值是垂直位置 |
| Xpx |
等效于 Xpx 50% |
| x% y% |
第一个值是水平位置，第二个值是垂直位置 |
| x% |
等效于 Xpx 50% |
| left,top,right,bottom,center |
第一个值是水平位置，第二个值是垂直位置 |
| left |
等效于 left center |
| bottom 20px right 100px |
距离底部0px 距离右侧100px |
| bottom right 100px |
距离底部0px 距离右侧100px |
| bottom 100px right |
距离底部100px 距离右侧0px |
| right 80% bottom 45%; |
距离右侧80% 距离底部45% |
补充：
(1). top bottom：取值无效
(2). 以上表格中的%数值计算方式见第4点关于%有话说
(3). 多张图片的时候用 “,” 隔开。如： 0 0, center;
-
关于px值有话说
px值是相对自身位置的偏移
-
关于%有话说
当指定百分比值的时候，实际上执行了以下的计算公式（该公式可以用数学方式定义图片和容器相对位置重合）
(container width - image width) * (position x%) = (x offset value)
(container height - image height) * (position y%) = (y offset value)
此处；这个contain width在background-origin取 padding-box的时候（等于盒子padding + width content）
所以，如果背景图片的大小和容器一样，那设置百分比的值将永远无效，因为“容器和图片的差”为0（图片永远填满容器，并且图片的相对位置和容器的相对位置永远重合）。在这种情况下，需要为偏移使用绝对值（例如px）
-
50% 和center的区别
个人感觉是一样的
四. background-size
- 作用：设置背景图片大小。图片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。
- 可取值：
| 取值 |
含义 |
| contain |
缩放背景图片以完全装入背景区，可能背景区部分空白 |
| cover |
缩放背景图片以完全覆盖背景区，可能背景图片部分看不见 |
| Xpx Ypx |
第一个值指定图片的宽度，第二个值指定图片的高度 |
| x% y% |
第一个值指定图片的宽度，第二个值指定图片的高度 |
| x |
指定图片的宽度，图片的高度隐式的为auto |
| auto |
根据图片等比例 |
- 关于%有话说
% 的宽度对应的是 container width；container width理解就是铺背景图片的区域宽度
五. background-repeat
- 作用：定义背景图像的重复方式。
- 可取值：
| 取值 |
含义 |
| repeat/repeat-x/repeat-y |
图像会按需重复来覆盖整个背景图片所在的区域 |
| space |
图像会尽可能得重复, 但是不会裁剪. 第一个和最后一个图像会被固定在元素(element)的相应的边上, 同时空白会均匀地分布在图像之间. |
| round |
随着允许的空间在尺寸上的增长, 被重复的图像将会伸展(没有空隙), 直到有足够的空间来添加一个图像. 当下一个图像被添加后, 所有的当前的图像会被压缩来腾出空间. |
| no-repeat |
图像不会被重复 |
六. background-origin
- 作用：指定背景图片的原点位置背景相对区域.
- 自我理解：背景图片“铺”的区域；决定content width的大小
- 可取值：
| 取值 |
含义 |
| border-box |
背景图片的摆放以border区域为参考 |
| padding-box |
背景图片的摆放以padding区域为参考，默认值
|
| content-box |
背景图片的摆放以content区域为参考 |
注： background-origin 都是对应区域的外边界
七. background-clip
- 作用：设置元素的背景**（背景图片或颜色）**是否延伸到边框、内边距盒子、内容盒子下面—MDN的说法
- 个人理解：个人感觉该属性是仅仅对background-color生效的
原因： 其值设置成 border-box（或者content-box）；背景图片依然还是按在padding-box区域内显示（因为background-origin的值默认padding-box）
- 可取值:
| 取值 |
含义 |
| border-box |
背景以border区域为参考 |
| padding-box |
背景以padding区域为参考 |
| content-box |
背景以content区域为参考 |
- 与background-clip的区别：
(1). 该属性的设置对background-color的也有效
(2). 该属性不会对background-position有任何影响，background-orgin会影响的
可以理解该属性就是把想隐藏的部分隐藏了
注： background-clip 都是对应区域的外边界
八. background-attachment
- 作用：决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动。
- 可取值：
| 取值 |
含义 |
| fixed |
背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动 |
| local |
背景相对于元素的内容固定。如果一个元素拥有滚动机制，背景将会随着元素的内容滚动， 并且背景的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框 |
| scroll |
背景相对于元素本身固定， 而不是随着它的内容滚动（对元素边框是有效的） |
实际效果区分可以移到这里体验：https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-size
- 对background-position的影响
background-attachment:fixed 后，相对的是浏览器的高度;相当于背景被设置在了body上。
