[分享]css中怎么把背景图设置小点

在CSS中，我们经常需要设置一个背景图来美化我们的网页。不过，一些背景图可能太大，导致网页加载缓慢，不太友好。所以，怎样把背景图的尺寸调整为小点呢？首先，我们需要在CSS中指定一个背景图，如下：css...

在CSS中，我们经常需要设置一个背景图来美化我们的网页。不过，一些背景图可能太大，导致网页加载缓慢，不太友好。所以，怎样把背景图的尺寸调整为小点呢？
首先，我们需要在CSS中指定一个背景图，如下：

css
body {
  background-image: url(image.png);
  background-size: cover;
} 

上述代码设置了一个背景图`image.png`，并且使用`cover`属性，把背景图缩放至适合屏幕大小的尺寸。如果我们想缩小背景图的尺寸，可以设置一个具体的宽度和高度，如下：

css
body {
  background-image: url(image.png);
  background-size: 50% 50%;
} 

上述代码设置了一个背景图`image.png`，并且把宽度和高度都设置为50%。这样，背景图的大小就被缩小了一半。当然，你也可以自己设定一个具体的数值，比如：

css
body {
  background-image: url(image.png);
  background-size: 300px 200px;
} 

上述代码把宽度设为300px，高度设为200px，同样可以达到缩小背景图的目的。
除了`background-size`属性，你还可以使用`background-repeat`属性，控制背景图的重复方式。默认情况下，背景图会重复填充整个背景。如果你不想让背景图重复太多，可以把`background-repeat`设为`no-repeat`，如下：

css
body {
  background-image: url(image.png);
  background-size: 50% 50%;
  background-repeat: no-repeat;
} 

综上所述，我们可以用`background-size`和`background-repeat`属性来调整背景图的大小和重复方式，让我们的网页更美观、更流畅。