CSS3 背景(background-size,background-origin)

1、background-size 

规定背景图片的尺寸。能够以像素或百分比规定尺寸。如果以百分比规定尺寸，那么尺寸相对于父元素定宽度和高度。

（1）定义和用法

 默认值：auto

继承属性：没有

javascript语法：background-size:60px 80px

语法

background-size:length|percentage|cover|contain

具体实例：

length:

div#DemoArea
{
background-image:url('/i/eg_smile.gif');
background-repeat:no-repeat;
background-size:75px 75px;
}

具体效果：

percentage

div#DemoArea
{
background-image:url('/i/eg_smile.gif');
background-repeat:no-repeat;
background-size:100% 100%;

}

效果：

cover:

div#DemoArea
{
background-image:url('/i/eg_smile.gif');
background-repeat:no-repeat;
background-size:cover;
}

效果：

contain:

background-size:contain;

效果：

2、background-origin

概述性用于规定背景图片的定位区域。背景图片可以放置于content-box、padding-box、或border-box区域。

主要用于规定background-position属性相对于什么位置来定位。注释：如果背景图像的 background-attachment 属性为 "fixed"，则该属性没有效果。

语法

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

值	描述
padding-box	背景图像相对于内边距框来定位。
border-box	背景图像相对于边框盒来定位。
content-box	背景图像相对于内容框来定位。

例子：

#MyDIV
{
padding:25px;
border:10px dotted #000000;
background-image:url('/i/eg_smile.gif');
background-origin:padding-box;       /*border-box、content-box*/
background-repeat:no-repeat;

}

padding-box:

border-box:

content-box: