background-size

Question

老师。图片的宽高和background-size有啥关系啊，看得懵懵的。可以理解background-size相当于画布吗。

Answer 1

TooooBug 2020-08-12 10:02:34

background-size实际上就是指定背景图要以多大尺寸进行显示，是控制背景图缩放的。

如果background-size显式设置了尺寸（多少像素/em/rem之类的），那么背景图会按设置的大小进行显示，与它本身的宽高关系不大。

如果只设置了一边的尺寸（width或height），则另一边默认为auto，此时图片会按照设定了尺寸的那一边的大小等比缩放。

如果background-size设置的是cover/contain之类的值，则会按照容器的大小来缩放背景图尺寸，与图片本身的宽高关系也不大。