[分享]css中如何让图片平铺

CSS中，我们可以使用background属性来设置图片平铺的方式。background属性用于设置元素的背景，包括颜色、图片等。要让图片平铺，我们需要设置backgroundrepeat属性。该属性...

CSS中，我们可以使用background属性来设置图片平铺的方式。background属性用于设置元素的背景，包括颜色、图片等。

要让图片平铺，我们需要设置background-repeat属性。该属性用于控制背景图片的平铺方式。

background-repeat: repeat; 

上述代码会将背景图片水平和垂直方向平铺，直到填充满整个元素。如果图片尺寸小于元素尺寸，会重复填充图片。如果图片尺寸大于元素尺寸，会被部分切割。

如果想要只在水平方向平铺，可以使用background-repeat的值为repeat-x：

background-repeat: repeat-x; 

这样，背景图片就会在水平方向上无限重复。

同理，若想在垂直方向上平铺，可以使用background-repeat的值为repeat-y：

background-repeat: repeat-y; 

若想让图片只出现一次，可以使用background-repeat的值为no-repeat：

background-repeat: no-repeat; 

此时背景图片会被放置到元素的左上角，并且只会出现一次。

如果我们不希望背景图片重复出现，但是又想要铺满整个元素，可以使用background-size属性。该属性用于控制背景图片的尺寸和缩放方式。

background-size: cover; 

上述代码会自动缩放背景图片，保持宽高比的情况下，填充整个元素。如果图片尺寸小于元素尺寸，会拉伸图片。如果图片尺寸大于元素尺寸，会被部分切割。

background-size: contain; 

如果想让背景图片尽量大地占据元素，同时不被裁剪，可以使用background-size的值为contain。此时背景图片会被缩放至完整覆盖整个元素，不会被裁剪掉。

总之，在CSS中实现图片平铺非常简单。只需要掌握好background-repeat和background-size属性，就能控制背景图片的显示方式。