background基本性质

可以加的参数有color，图片的url，是否循环图片，是否悬停图片，还有图片出现位置。

其中不写的话，默认repeat循环，默认不悬停，默认出现位置是左上(left top)

示例

background:url('logo1sm.jpg') no-repeat center top

加载了此图为背景，不循环显示，显示位置是中间靠上

background-origin属性

border-box/padding-box/content-box分别使背景图片起始点在边框/内距/内容左上。

示例

background-origin:border-box

此段文字是content部分，周围一圈是padding，黑色的是边框部分

background-origin:padding-box

此段文字是content部分，周围一圈是padding，黑色的是边框部分

background-origin:content-box

此段文字是content部分，周围一圈是padding，黑色的是边框部分

background-size属性

x y或者cover/contain分别是内切外切

示例

background-size：200 50

通过自定义大小可以拉伸图片得到想要的效果

background-size：100% 100%

通过自定义大小可以拉伸图片得到想要的效果

background-size：cover

cover就是图片调整大小直到完全包含div

background-size：contain

contain就是图片调整大小直到完全被div包含

background-clip属性

border-box/padding-box/content-box分别使背景图片展示在边框/内距/内容左上。

示例

background-origin:border-box

此段文字是content部分，周围一圈是padding，黑色的是边框部分

background-origin:padding-box

这三个效果是配合background-origin:boder-box做的，即起点是boder，否则效果不明显

background-origin:content-box

完整样式background:url('logo1sm.jpg') no-repeat;background-size:150px 150px;background-origin:border-box;background-clip: content-box