4. css3 背景

CSS3 背景

1. background-size 属性

background-size 属性规定背景图片的尺寸。

/* 设置背景图大小    */
background-size: 120px 100px;
background-size: 50% 100%;
background-size: 100% auto;
background-size: cover;/* 图片填满盒子 图片等比例缩放 可能背景图显示不完整*/
background-size: auto 100%;
background-size: contain;/*图片完整显示 盒子不一定能填满 图片等比例缩放*/

2.background-clip 属性规定背景（颜色和图片）的绘制区域

background-clip: border-box|padding-box|content-box;

border-box 背景被裁剪到边框盒

padding-box 背景被裁剪到内边距框

content-box 背景被裁剪到内容框

background-clip: border-box; /*默认值*/
background-clip: padding-box;
background-clip: content-box;

3.background-origin 属性规定背景图像原点

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

padding-box 背景图像相对于内边距框来定位。

border-box 背景图像相对于边框盒来定位。

content-box 背景图像相对于内容框来定位。

background-origin: padding-box;
background-origin: content-box;
background-origin: border-box;/*默认值*/
border-left-color: transparent;

4.设置多个背景图像

background: url(../bg-tl.png) no-repeat left top ,
url(../bg-tr.png) no-repeat right top,
url(../bg-br.png) no-repeat right bottom,
url(../bg-bl.png) no-repeat left bottom
;
background-color: red;