css怎么不重叠平铺

CSS是前端开发中的重要技能之一。其中，如何实现不重叠平铺也是开发中需要解决的问题之一。下面我们来看看CSS怎么实现不重叠平铺。

我们可以使用CSS中的background-repeat和background-position属性来实现不重叠平铺。其中，background-repeat用于设置背景平铺方式，有以下几种值：

background-repeat: repeat; // 默认值，使背景在水平和垂直方向上平铺
background-repeat: repeat-x; // 仅在水平方向上平铺
background-repeat: repeat-y; // 仅在垂直方向上平铺
background-repeat: no-repeat; // 不平铺

而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; // 起点在右下角

基于上述两个属性，我们可以做出不重叠平铺的效果。示例代码如下：

body {
  background-image: url('bg.jpg');
  background-repeat: no-repeat;
  background-position: center center;
}

上述代码表示在页面的正中心显示一张背景图片，且不进行重叠平铺。这是一种常见的背景图片展示方式，比如新闻网站等。