1. background-clip属性 指定背景从元素何处开始显示
值有:border-box(默认) 背景显示到border
padding-box 背景显示到padding
content-box 背景仅显示到内容,padding和border部分都不显示背景
兼容写法(先写老写法再写新写法):
-moz-background-clip: border ; /*firefox3.6-*/
-webkit-background-clip: border-box ; /*webkit*/
background-clip:border-box ; /*w3c标准 IE9+ ff4.0+ */
提示:background-clip属性指定背景从何处开始显示:
/*如果是颜色指定的背景 设置border,padding,content有效*/
/*如果是图片背景 设置padding,content有效,设置为boder时会以padding显示,若要把背景图片设置border显示, 可使用下面的background-origin指定*/
2. background-origin属性 指定背景图片从元素何处开始显示
值有:border-box 指定背景从外边框border开始绘制
padding-box(默认) 指定背景从内补白区域开始绘制
content-box 指定背景从仅从显示的内容开始绘制
兼容写法:
-moz-background-origin:border ; /*old gecko andwebkit */
-webkit-background-origin:border ;
-moz-background-origin:border-box ; /*new gecko and webkit*/
-webkit-background-origin:border-box ;
-o-background-origin:border-box ; /*presto*/
background-origin: border-box ;
提示:background-origin属性指定背景图片从何处开始显示
/* 同时和background-clip使用时,优先级高于background-clip,可从border padding content显示*/
3. background-size属性 指定背景图片的尺寸
值有: auto 默认,保持背景图片原始宽度和高度
400px 200px 设置背景图片的宽度,高度
80% 100% 设置背景图片占当前容器元素的宽度百分比,高度百分比 (设为100%,100%可铺满容器并且图片也是完整的,只是图片宽高比变成了容器的宽高比)
conver 把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
contain 在把背景图片完全显示的基础上放大到最大
另:conver和contain时背景图片会保持原图的宽高比
兼容写法:
-moz-background-size: auto ; /*mozilla*/
-webkit-background-size : 300px 100px ; /*webkit*/
-o-background-size: conver ; /*presto*/
background-size:contain ; /*w3c标准*/
另,css3中还允许为元素添加多个背景图片,使用方法是:
background-image:url(/img/img01.png),url(/img/img02.png),url(/img/img03.png)
其中,img01将放在最上层。