[分享]css不让背景图重复

CSS中设置背景图时，有些情况下我们不希望它重复出现。这时，可以使用backgroundrepeat属性来控制背景图的重复。下面我们具体来看一下。 首先，当我们设置了背景图后，如果不进行设置，它默认是...

CSS中设置背景图时，有些情况下我们不希望它重复出现。这时，可以使用background-repeat属性来控制背景图的重复。下面我们具体来看一下。 首先，当我们设置了背景图后，如果不进行设置，它默认是平铺出现的。这是因为background-repeat属性默认值是repeat。

 body {
        background-image: url('bg.jpg');
        /* 不进行设置，默认为 repeat */
    } 

如果希望背景图不平铺，只出现一次，则可以将其设置为no-repeat。

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

另外，如果希望背景图只在水平或垂直方向重复出现，可以使用background-repeat的x和y属性。

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

 body {
        background-image: url('bg.jpg');
        background-repeat: repeat-y; /* 只在垂直方向重复 */
    } 

此外，如果背景图大小比页面小，则背景图会被平铺至页面大小。为了避免这种情况，可以使用background-size属性。

 body {
        background-image: url('bg.jpg');
        background-repeat: no-repeat;
        background-size: cover; /* 拉伸铺满背景 */
    } 

以上是CSS中设置背景图不重复的几种方法，希望对大家有所帮助。