css中怎样将图片平铺

在CSS中，如果想将一张图片平铺到整个页面或某个元素中，可以使用background-repeat属性。

body {
    background-image: url("img/bg.jpg");
    background-repeat: repeat;  /* 水平和垂直方向均重复 */
} 

如果想只在水平方向或垂直方向上重复，可以将background-repeat属性分别设置为repeat-x或repeat-y。

body {
    background-image: url("img/bg.jpg");
    background-repeat: repeat-x;  /* 仅在水平方向重复 */
} 

如果想让图片不重复，可以将background-repeat属性设置为no-repeat。

body {
    background-image: url("img/bg.jpg");
    background-repeat: no-repeat;  /* 不重复 */
} 

除了使用background-repeat属性，还可以使用background-size属性控制图片的大小。

body {
    background-image: url("img/bg.jpg");
    background-repeat: no-repeat;
    background-size: cover;  /* 图片被拉伸，以覆盖整个元素 */
} 

如果想让图片虽然平铺但不被拉伸，可以使用contain值。

body {
    background-image: url("img/bg.jpg");
    background-repeat: repeat;
    background-size: contain;  /* 图片不被拉伸，尽量保持原始比例 */
}