css3背景

CSS3允许使用多个属性（比如background-image、background-repeat、background-size、background-position、background-origin和background-clip等）在一个元素上添加多层背景图片。该属性的应用大大改善了以往面对多层次设计需要多层布局的问题，帮助Web前端开发者在不借助Photoshop的情况下实现对页面背景的设计，简化了背景图片的维护成本。

background-size

background-size：属性规定背景图像的尺寸

语法： background-size: length|percentage|cover|contain

属性值

• `length`：设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"
• `percentage`：以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"
• `cover`：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中
• `contain`：把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域

div {
    background:url('../images/bg.png');
    background-size: 100% 100%;
}

background-image

background-image：属性设置一个元素的背景图像

语法： background-image: url('图片地址1')，url('图片地址2');

属性值

• url {string} ：图像的URL
• none ：无图像背景会显示。默认值
• inherit ：指定背景图像应该从父元素继承

div {
    background-image: url('../images/bg.png');
}

background-origin

background-origin：属性指定了背景图像的位置区域

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

属性值

• padding-box ： 背景图像相对于内边距框来定位
• border-box : 背景图像相对于边框盒来定位
• content-box ： 背景图像相对于内容框来定位

div {
    background-image:url('../images/bg.jpg');
    background-position:left;
    background-repeat:no-repeat;
    background-origin:content-box;
}

background-clip

background-clip：属性规定背景的绘制区域

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

属性值

• border-box ：背景被裁剪到边框
• padding-box ：背景被裁剪到内边距框
• content-box ：背景被裁剪到内容框

div {
    background-color:yellow;
    background-clip:content-box;
}