css background-image 学习笔记

先给出图片原样

1、默认从从上到右下1比1 填充的，如果元素的高度和宽度小于图片，则只能显示部分图片。效果如下图

2、如果元素的高度和宽度大于图片，则默认会用图片平铺元素。效果如下图

3、可以是用background-repeat: 设置是否平铺,默认，常用的属性有 repeat（x,y 两个放系那个平铺），repeat-x （水平平铺），repeat-y （垂直平铺），no-repeat（水平和垂直方向都不平铺）；其他不常用属性

　　　background-repeat : space;//用于图片小于元素，尽量使用空间平铺完整的图片；

round; //尽可能多的平铺完整的图片，如果不够平铺就挤压缩放（图片会变形）

inherit；//继承父元素的重复方式；

4、背景图片可以设置多个，先设置的在最上面，效果如下图；

background-image:url("img/small.jpg") ,url("img/big.jpg") ;

background-repeat: no-repeat;

5、background-position 用于元素大小小于图片时，设置显示图片的位置（注意这里只的是图像相对于元素左上角的位置，如果是正值效果相当于图片加了定位属性top和left等）；效果如下图

background-position: 50% 50%;  //百分比 是相对于 元素大小减去图片大小乘以百分比

6、background-origin : 设置图片的其实位置，取值为border-box，content-box，padding-box，默认是 padding-box

background-origin: content-box;

7、background-clip 裁切图片，超出容器的位置的部分裁切掉，取值为border-box，content-box，padding-box，默认值为 border-box 开始裁切；

background-clip: content-box;

巴特西