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的盒子。
- width: 400px;
- height: 400px;
- 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%;一样。