多学一点-css属性background

background是一个复合属性，其实有很多跟背景呈现相关的其它属性我们平时使用的时候都忽略掉了，今天我们就来好好学习一下background。

1、backgournd属性

• background 简写属性在一个声明中设置所有的背景属性，可以设置以下属性。
• background-color：规定要使用的背景颜色。
• background-position：规定背景图像的位置。
• background-repeat：规定如何重复背景图像。
• background-image：规定要使用的背景图像。
• background-attachment：规定背景图像是否固定或者随着页面的其余部分滚动。
• background-clip：规定背景的绘制区域。【css3】
• background-size：规定背景图片的尺寸。【css3】
• background-origin：规定背景图片的定位区域（影响：background-position、background-size）。【css3】
  接下来仅介绍这些属性常见的属性值，W3School有部分属性值不全，这些属性值达到的效果请用浏览器开发者工具调试。

1.1 background-color

• 设置元素的背景颜色；

• 默认值：transparent。

  
  image.png

1.2 background-position

• 设置背景图像的起始位置（相对于background-origin来定位）；
• 是background-position-x、background-position-y的简写属性；

• 默认值：0% 0%。

  
  image.png

1.3 background-repeat

• 设置是否及如何重复背景图像；

• 默认值：reapeat（在水平方向和垂直方向重复）。

  
  image.png

1.4 background-image

• 为元素设置背景图像；
• 默认地，背景图像位于元素的左上角（默认padding-box左上角， 如果background-origin: content-box；则在content-box左上角），并在水平和垂直方向上重复元素。背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距。

image.png

1.5 background-attachment

• 设置背景图像是否固定或者随着页面的其余部分滚动（建议一般页面背景图可以设置为fixed，其它模块的背景就用scroll就好了，不然结果肯定会出乎你的意料，试试吧~~~）；
• 默认值：sroll。
  注：初步猜测background-attachment:fixed;是相对body来进行定位的-通过测试chrome和firfox得出。

image.png

1.6 background-clip【css3】

• 规定背景的绘制区域;

• 默认值：border-box。

  
  image.png

1.7 background-size【css3】

• 规定背景图像的尺寸;

• 默认值：auto。

  
  image.png
• 如果值是百分比，那么百分比是以background-origin指代的盒子的宽高为基准的（默认padding-box）；
• 如果只有一个值，那么另一个值为auto，它的呈现会受有值的那一边的值所影响，同比缩放；
• 100% 100%，会调整背景图片宽高比来进行缩放使背景图片填满整个背景区域【图片是完整的，但是缩放后图片的宽高比可能会变】；
• cover，会根据图片本身的宽高比将图片填满整个背景区域【图片不一定完整，可能只有部分在背景区域，缩放后的图片宽高比不变】；
• contain，会根据宽高比适当的同比缩放宽高，让款或高能填满背景区域为止【图片是完整的，缩放后的图片宽高比不变，但是可能会出现图片没有完全填满整个背景区域】。

1.8 background-origin【css3】

• 规定 background-position 属性相对于什么位置来定位;

• 默认值：padding-box。

  
  image.png

2、理解几个关键background相关属性

github代码

image.png

3、参考链接

W3School-CSS background 属性