css设置图片平铺(css图片平铺自适应)

CSS是一种前端开发语言，可以用来控制网页的样式。其中，图片平铺自适应是CSS中经常用到的一个属性。

CSS中的background-repeat属性可以设置图片的平铺方式，可选值包括：repeat（默认值，横向和纵向重复）、repeat-x（横向重复）、repeat-y（纵向重复）和no-repeat（不重复）。

而background-size属性可以用来设置背景图像的大小。常见的几个可选值为：

background-size: auto;  /* 默认值，即按照原始尺寸显示 */
 background-size: cover; /* 按比例缩放背景图像，使其完全覆盖容器 */
 background-size: contain; /* 按比例缩放背景图像，使其全部显示在容器内 */
 background-size: 100% 100%; /* 设置背景图像的尺寸，显示为100%宽度和100%高度，完全填满容器 */

其中，background-size: cover; 可以实现自适应的效果。当图片的宽高比例与容器的宽高比例不同时，会将图片等比缩放，使得整个容器被图片完全覆盖，不留出空白。

比如，下面的代码会将id为“box”的div容器的背景图片完全覆盖容器，不留出空白：

#box {
background-image: url("background.jpg");
background-repeat: no-repeat;
background-size: cover;
}

通过使用CSS的background-repeat和background-size属性，可以轻松地实现图片平铺自适应的效果，让网页呈现出更好的视觉效果。