CSS3 允许你为一个元素设置多张背景图片
div{ ??width:400px; ??height:400px; ??border:1px solid #000000; ????????//边框 ??background-image:url(bg1.jpg),url(bg2.jpg); ?????????//背景图片 ??background-position: top left,center right; ??????????//背景位置：第一张图左上 第二张居中靠右 ??background-repeat:no-repeat,no-repet; ??????????//背景平铺：不平铺}效果
简写形式：
div{ ??width:400px; ??height:400px; ??border:1px solid #000000; ???????????background：url（“bg1.jpg”） top left no-repeat， ??????????????url（“bg2.jpg”） center right no-repeat；}
background-size：
长度：设置北京图片高度和宽度，第一个值设置宽度，第二个值设置高度，如果只给出第I个值，
第二个是“auto” 自动
百分比：相对于所在区域的百分比，第一个值设置宽度，第二个值设置高度，如果只给出一个值，
第二个值是“auto” 自动
cover（封面）：保持图像的长宽比例，并将图像缩放成刚好完全覆盖所在区域的最小大小
contain：保持图像的长宽比例，并将图像缩放成刚好完全显示在所在区域的内的最大大小。
Css3允许你为背景图片定义一个合适的尺寸
当我们为div定义背景图片的时候，默认情况下 图片的尺寸可能过大或过小
div{ ??width:400px; ??height:400px; ??border:1px solid #000000; ???????????background：url（“bg1.jpg”） top left no-repeat， ??????????????url（“bg2.jpg”） center right no-repeat； ???//如果我们给定的图片是长500 宽500像素的图片，那么这个div的背景就不能完全的显示 ???Background-size：400px 400px ???????????//设置背景图片尺寸和div相同}
使用简写形式：
div{ ??width:400px; ??height:400px; ??border:1px solid #000000; ???????????background：url（“bg1.jpg”） center/contain no-repeat， ????????????}
background-origin:可以定义背景图片的定位区域
padding-box（默认）：
border-box：背景图片以边框为基本定位
content-box：
background-clip：可以定义背景乳片的剪裁区域
border-box（默认）：剪裁超出盒子边框的背景图片
padding-box：剪裁超出盒子内边距区域的背景图片
content-box：剪裁超出盒子内容区域的背景图片
背景属性的简写形式
background:pink url("bg1.jpg") no-repeat center/contain border-box padding-box ;
pink:背景颜色
url：图片地址
no-repeat：不平铺
图片位置及尺寸：center contain（以最大大小显示）
border-box：背景定位以边框为基准
padding-box：背景剪裁以内边距为基准
Css3 背景
原文地址：https://www.cnblogs.com/xiaowie/p/9824565.html