1. background-size属性:控制背景图像的大小
语法如下:
background-size:auto | length | percentage | cover | contain
PS:如果用户使用的是Firefox浏览器,需使用“moz-background-suze”或“background-size”的形式。如果用户使用的是Webkit引擎支持的浏览器,需使用“webkit-background-size”的形式,如果使用的是Opera浏览器,可直接使用“background-size”
2. background-clip属性:用来指定背景的显示区域或背景的裁剪区域
语法如下:
background-clip: border-box | padding-box | content-box
border-box:默认值,表示背景从border(边框)区域向外裁剪,也就是超出部分将被裁剪掉
padding-box:表示背景从padding(补白)区域向外裁剪,超过padding区域的背景将被裁剪掉
content-box:表示背景从content(内容)区域向外裁剪,超出content区域的背景将被裁剪掉
3. background-origin属性:用来指定绘制背景图像开始时的位置
语法如下:
background-origin:border | padding | content
border:默认值,表示从border(边框边缘)区域开始显示背景
padding:表示从padding(补白边缘)区域开始显示背景
content:表示从content(内容边缘)区域开始显示背景
PS:1)如果背景的background-repeat属性的值不是no-repeat,这个属性是无效的,它会使用默认值从border区域开始显示
2)和background-size属性一样,使用background-origin属性需要考虑浏览器的兼容性,前缀名可参考background-size
3)通常情况下,它与background-clip属性一起使用