css如何清除背景图片重复

第一段：

在CSS中，我们可以使用background-repeat属性来控制背景图片的重复方式。这个属性有四个值：

background-repeat: repeat | repeat-x | repeat-y | no-repeat;

其中：

• repeat：在水平和垂直方向上都重复
• repeat-x：在水平方向上重复
• repeat-y：在垂直方向上重复
• no-repeat：不重复

不过，即使我们设置了repeat-x或repeat-y，图片也有可能重复，其原因是图片的大小小于容器的大小。这时候，我们可以使用background-size属性来控制背景图片的大小。

background-size: 100% 100%;

第二段：

上面的方法虽然可以解决图片重复的问题，但是它不够灵活，我们可能需要在某些情况下只重复横向或纵向的一部分。这个时候，我们可以使用background-position属性。

background-position: x轴的位置 y轴的位置;

其中，位置可以是像素值、百分比或关键字。关键字有left、center、right、top、bottom等。

例如，我们只想让背景图片在x轴上重复：

background-repeat: repeat-x;
background-position: center;

第三段：

除了上面的两种方法外，我们还可以使用CSS3的background属性。这个属性可以一次性设置背景图片的所有相关属性，包括背景颜色、背景图片、背景位置、重复方式、大小等。

background: color image position repeat size;

其中，color是背景颜色，image是背景图片的URL，position是背景图片的位置，repeat是重复方式，size是背景图片的大小。

例如，以下代码表示使用背景颜色为白色，背景图片为bg.png，背景位置在中心，x轴上重复，y轴上不重复，大小为100%。

background: #fff url(bg.png) center repeat-x 100%;

第四段：

如果上面的方法都不适用于我们的场景，那么我们可以考虑使用CSS伪类：before或after。这个方法的原理是通过额外增加一个元素，在其背景上显示图片。

body:before {
    content: "";
    background-image: url(bg.png);
    background-repeat: repeat-x;
    background-size: 100%;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

上面的代码新增了一个before元素，使用背景图片bg.png。这个元素的宽高和页面一样大，并且设置了z-index为-1，使它位于最底下，不影响页面的其他元素。这个方法的缺点是需要增加一个额外的元素，对页面性能有一定的影响。