[分享]css中平铺图片怎么设置大小

CSS中的平铺图片是一种常用的背景设置，可以让页面看起来更加美观。但是对于一些刚开始接触CSS的小伙伴来说，怎么设置平铺图片的大小可能会有些困惑。今天我就来给大家分享一下如何设置CSS中平铺图片的大小...

CSS中的平铺图片是一种常用的背景设置，可以让页面看起来更加美观。但是对于一些刚开始接触CSS的小伙伴来说，怎么设置平铺图片的大小可能会有些困惑。今天我就来给大家分享一下如何设置CSS中平铺图片的大小吧！
首先，我们可以使用background-size属性来设置平铺图片的大小。 background-size有两个属性值，一个是长度值或百分比，另一个是cover或contain。其中长度值或百分比可以用来具体设置图片的大小，cover和contain可以根据图片的大小自动进行放大或缩小来适应元素的大小。
如果我们需要设置一张图片为背景，并且需要将其平铺到整个页面上，可以使用如下代码：

body {
  background-image: url("bg.png");
  background-repeat: repeat;
  background-size: 100% auto;
} 

其中，background-repeat设置为repeat可以让图片平铺到整个页面上。而background-size属性中的100% auto则表示图片在水平方向上铺满整个页面，在竖直方向上按比例缩放以适应页面的大小。
如果我们需要将平铺图片的大小设置为一个固定的值，可以使用长度值或百分比来具体设置。例如：

div {
  background-image: url("bg.png");
  background-repeat: repeat-x;
  background-size: 200px 100px;
} 

其中，background-size设置为200px 100px，即在水平方向上将图片的大小设置为200px，在竖直方向上将图片的大小设置为100px。需要注意的是，如果使用百分比来设置图片的大小，百分比是相对于背景图片所在的元素的大小来进行计算的。
总之，通过设置background-size属性，我们可以很方便地调整CSS中平铺图片的大小，让页面看起来更加美观。希望本文对大家有所帮助！