[分享]css不完整背景图

CSS的不完整背景图是指当一个背景图无法完全填满背景区域时，如何处理该背景图的显示问题。在使用background属性设定背景图像和背景色的时候，如果背景图像的大小小于容器长度和宽度，那么浏览器将对背...

CSS的不完整背景图是指当一个背景图无法完全填满背景区域时，如何处理该背景图的显示问题。

在使用background属性设定背景图像和背景色的时候，如果背景图像的大小小于容器长度和宽度，那么浏览器将对背景图片进行拉伸，这样会使得背景图片失真。为了避免这个问题，我们可以使用background-size属性来控制背景图像的大小，使其合适地填充容器。

.container {
  width: 200px;
  height: 200px;
  background-image: url('https://unsplash.it/400/400');
  background-size: cover;
} 

在上面的代码中，.container代表背景区域容器，其大小为200px * 200px。background-image属性设置背景图像的地址，background-size属性设置背景图像的大小填充方式，这里使用的是cover属性，表示背景图像将会铺满整个区域。

除了cover之外，background-size还有其他属性，例如contain、auto、length、percentage等等。实际使用中可以根据不同背景图像的大小和容器的大小选择最合适的属性值，以达到最佳效果。