CSS3背景

1、background-clip 指定背景绘制区域。

2、background-origin 结合background-position使用。

3、background-size 指定背景图片大小。

4、background-image:url(img1.jpg),url(img2,jpg) 使用多个背景。

其他的

background:color image position repeat外加一个attachment。

一、background-clip ：指定背景绘制区域。共有 3 种情况：

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

（2） padding-box 背景被裁剪刀内边距框

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

假设图片是从边框开始绘制的。

首先图是这样的，长200px，宽200px。内边距50px，边框50px。这样算下来整个图算上框长400px，框400px。

1、如果background-clip:border-box。从边框开始裁剪，那么是这样子的。

2、background-clip:padding-box。

看到了没，border的那块图片被裁剪掉了。美女的头发少了一块。

3、background-clip:content-box。

原背景图片大小不变，从边框开始绘制。从内容裁剪，背景图片只剩下200px 200px内容区域了。

二、background-origin

定义图片的起始位置。

相对于background-position的位置。

假设background-origin:border-box。若background-position: 30px 50px;

background-origin:padding-box;background-position: 30px 50px;

background-origin:content-box;background-position: 30px 50px;

emmmm,图片比例不变，不裁剪...

三、background-size

设置图片背景大小。就比如这张图

原图1024x695。

我设置400x400的盒子。

1. width: 400px;
2. height: 400px;
3. background: cyan url(timg.jpg) no-repeat;

(1)background-size:100%;

(2)background-size:100% 100%;

(3)background-size: 50%

(4)background-size:50% 50%;

(5)background-size: 400px

(6)background-size: 400px 400px;

最后两个background-size:cover，contain。

我换了一张图121x75

看好了，原图这么大。宽200px,按原图比例121:75，高124px左右。

background-size:cover;

将200x200的容器撑满。高200px,按原图比例121:75，则宽为323px左右。当然，容器只能存放200px,剩下的就不能显示了。

background-size:contain;

撑满能撑满的一边。与cover是反的。按原图比例缩放。效果是background-size:100%;一样。