在HTML中，我们经常需要设置一个背景图片。有时我们需要让这个背景图片不重复平铺，这样才能达到最佳的视觉效果。
一、background-repeat属性
在HTML中设置背景图片可以使用CSS的background属性。而可以让背景图片不重复平铺使用CSS的background-repeat属性。background-repeat属性有以下取值：
background-repeat: repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: no-repeat;
其中，repeat表示X,Y轴都进行平铺；repeat-x表示只在X轴进行平铺；repeat-y表示只在Y轴进行平铺；no-repeat表示不进行平铺。
我们可以通过以下代码来实现不重复平铺的背景图片：
body {
background-image: url("image/bg.jpg");
background-repeat: no-repeat;
background-size: cover;
}
在上述代码中，我们使用了background-image属性设置背景图片的路径，并将background-repeat属性的取值设置为no-repeat，这样就实现了不重复平铺。另外，我们还使用了background-size属性将背景图片根据容器的大小进行自适应。
二、background-position属性
有时候，我们可能会想要设置背景图片在容器中的显示位置。这时我们就可以使用CSS的background-position属性。background-position可以取以下方式的值：
background-position: left top;
background-position: left center;
background-position: left bottom;
background-position: center top;
background-position: center center;
background-position: center bottom;
background-position: right top;
background-position: right center;
background-position: right bottom;
其中，left、center、right表示水平方向位置，top、center、bottom表示垂直方向位置。通过设置background-position属性，我们可以将背景图片设置在自己想要的位置。
下面是一个示例代码：
body {
background-image: url("image/bg.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
在上述代码中，我们使用了background-position属性将背景图片的位置设置在容器的中间位置。
三、background-attachment属性
background-attachment属性用于指定背景图片是否随容器一起滚动。其属性值有以下两种：
background-attachment: fixed;
background-attachment: scroll;
其中，fixed表示背景图片随页面滚动而不动，scroll表示背景图片随容器滚动而滚动。
下面是一个示例代码：
body {
background-image: url("image/bg.jpg");
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
在上述代码中，我们使用了background-attachment属性将背景图片固定在了页面上。
四、background属性
除了单独设置background-repeat、background-position、background-attachment属性外，我们还可以使用background属性来一次性设置这三个属性。如下所示：
body {
background: url("image/bg.jpg") no-repeat center center fixed;
}
在上述代码中，我们使用了background属性，将背景图片设置为不重复平铺、位于容器中间、固定在页面上。
总结
以上就是设置HTML背景图片不重复平铺的方法。我们可以使用CSS的background-repeat、background-position、background-attachment属性来分别控制背景图片的重复平铺、位置和跟随机制。另外，我们还可以使用background属性一次性设置以上三个属性。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/247329.html
微信扫一扫 
支付宝扫一扫 