你所不知道的background

今天要说说css中background这个属性里面的大学问。

曾经以为只要会写背景色，设置的了背景图片就是会用backgroung,今天啃书的过程中才发现还差的远呐。读本篇博客的你是不是和我的想法一样呐。那就认真的读读下面的文章吧。啊哈哈哈！

在一个声明中设置所有的背景属性：

body
  { 
background: #00FF00 url(bgimage.gif) no-repeat fixed top;  }

看到这串代码你怕了吗？知道他们都代表啥意思嘛？不要捉急，来看展开式。

展开式： 

background-color   设置元素的背景颜色，不能设置到外边距，可以继承父级的背景颜色，默认为透明。

background-position  设置背景图片的位置，有浏览器兼容问题

• 可以直接使用top,bottom,left,right,center直接定位
• 可以使用百分比，一个值是水平，第二个值是垂直。
• 可以使用px的单位，先水平再垂直

background-size  设置背景图片的尺寸

• 直接设置px值的宽高
• 设置百分比的宽高
• cover:把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
• contain:把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

第三中设置方式和第四种设置方式之间的区别建议亲自测试体会

background-repeat  设置重复方法，这个其实没啥说的，五种情况（水平垂直都重复，仅水平重复，仅垂直重复，不重复，继承父元素）

background-origin  规定背景图片的定位区域,这里用到盒模型的概念，结合background-position一起使用。

• padding-box:相对于内边距框来定位
• border-box:相对于边框来定位
• content-box：相对于内容框来定位

background-clip  设置背景的绘制区域，默认情况下背景会延伸到边框区域的下层（设置虚线边框去体会）

• padding-box:背景剪裁到内边距框
• border-box:背景剪裁到边框
• content-box：背景剪裁到内容框

background-attachment 设置背景图片随页面部分的滚动情况（今天的重点）

• fixed :背景图片相对于窗体固定。页面滚动背景图片不动，但是只对body元素有效
• scroll:背景图像相对于元素固定。当窗体的内容滚动时，窗体的背景图像会跟着移动；当一般元素的内容滚动时，背景图像不会跟着移动，因为背景图像总是要跟着元素本身，但会随元素的祖先元素或窗体一起移动,任何元素有效。
• local:背景图像相对于元素的内容固定。当元素的内容滚动时，背景图像总是要跟着内容一起移动,对body之外的元素有效。

附上一篇歪脖先生的文章，详细说说这个属性https://blog.csdn.net/ixygj197875/article/details/79333155

background-image  设置背景图片，这个也不必多说，url设置图片路径。

温馨提示：请设置一种可用的背景颜色，这样的话，假如背景图像不可用，页面也可获得良好的视觉效果。

这些属性值都可以从父级继承，但是IE浏览器不行

注意：任何版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"