background不要忽略的知识点（background-clip、background-size、background-attachment、background-origin）

1、background-clip

      语法：background-clip: border-box|padding-box|content-box;

       background-clip属性指定背景绘制区域。

        border-box默认值。背景绘制在边框方框内（剪切成边框方框）。

        padding-box背景绘制在衬距方框内（剪切成衬距方框）。

        content-box背景绘制在内容方框内（剪切成内容方框）。

2、background-size

语法：background-size:length|percentage|cover|contain;

length设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动)

percentage将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)"

cover此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。

contain此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

background-size属性指定背景图片大小

3、background-attachment

    语法：background-attachment：scroll | fixed | inherit ；

    background-attachment设置背景图像是否固定或者随着页面的其余部分滚动

    scroll背景图片随页面的其余部分滚动。这是默认

    fixed背景图像是固定的

    inherit指定background-attachment的设置应该从父元素继承

4、background-origin

语法：background-origin: padding-box|border-box|content-box;

background-Origin属性指定background-position属性应该是相对位置。

padding-box背景图像填充框的相对位置

border-box背景图像边界框的相对位置

content-box背景图像的相对位置的内容框