[分享]css不能平铺背景图

在网页中，我们经常会用到背景图来增强页面的视觉效果。但是有时候会遇到一个问题：无论怎么设置css，背景图都无法平铺。这个问题的原因是由于背景图本身的大小和容器元素的大小不匹配，导致无法完全填充容器元素...

在网页中，我们经常会用到背景图来增强页面的视觉效果。但是有时候会遇到一个问题：无论怎么设置css，背景图都无法平铺。

这个问题的原因是由于背景图本身的大小和容器元素的大小不匹配，导致无法完全填充容器元素。

.container {
  width: 500px;
  height: 300px;
  background-image: url("bg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
} 

如上代码所示，我们为容器元素设置了固定宽度和高度，然后将背景图设置为不重复、尽量覆盖整个容器元素。但是当容器元素比背景图小时，就会出现不能完全填充的情况。

解决这个问题的方法有两种，一种是用更大的背景图来覆盖容器元素；另外一种是用背景图平铺的方式，让背景图重复出现，直到完全填充容器元素。

.container {
  width: 500px;
  height: 300px;
  background-image: url("bg.jpg");
  background-repeat: repeat;
} 

上述代码中，我们将背景图的重复方式改为repeat，这样就能让背景图平铺重复出现。如果你想改变平铺的方向，可以将background-repeat属性的值改为repeat-x、repeat-y实现。

总之，当背景图不能平铺时，我们可以使用上述方法实现完全填充容器元素的效果。