background属性总结

background属性总结

1.background-img:引入图片路径，如果容器很大，图片很小的情况，就会出现平铺，可以设置background-repeat:no-repeat来解决。


这里由于容器太小，图片过大，导致显示不全的情况。就可以通过background-size来对图片进行裁剪。
下面是原图片

2.background-size
。给background-size设置一个100%属性

图片并没有完全覆盖容器，设置一个100%，另一边会自适应，也没有发生变形。
。给background-size设置100% 100%


背景图铺满整个容器，但是发生了变形。
。给background-size设置contain


没有铺满整个容器，但是没有发生变形。
。给background-size设置cover

没有发生变形，填满了整个容器，但是超出的部分就看不见了。
。backgroung-size:cover和background-position:center搭配使用


铺满整个容器，没有发生变形，但是好像被放大了。
。backgroung-size:cover和background-position:center搭配使用


没有铺满整个容器，没有发生变形，也没有缩放
3.background-position
可以设置两个值，可以使具体的值，也可以是left/top/right/bottom


第一个值代表水平，第二个值代表垂直。如果只给一个值，默认是水平方向。