css如何设置图片不重复-猿码集

CSS中通过background属性可以设置元素的背景样式，其中包括背景颜色、背景图片等，同时还可以设置背景图片的重复方式。

1. 设置背景图片

通过background-image属性可以设置元素的背景图片，例如：


div {
    background-image: url("images/bg.jpg");
}

上述代码指定了一个名为"bg.jpg"的图片作为div元素的背景。

2. 设置背景图片不重复

当背景图片的尺寸小于元素的尺寸时，为了使背景图片不重复出现，可以使用background-repeat属性，将其设置为no-repeat，例如：


div {
    background-image: url("images/bg.jpg");
    background-repeat: no-repeat;
}

上述代码指定了一个名为"bg.jpg"的图片作为div元素的背景，同时设置了背景图片不重复。

3. 设置背景图片在水平方向上不重复

如果只希望在水平方向上设置背景图片不重复，可以使用background-repeat属性，将其设置为repeat-x，例如：


div {
    background-image: url("images/bg.jpg");
    background-repeat: repeat-x;
}

上述代码指定了一个名为"bg.jpg"的图片作为div元素的背景，同时设置了背景图片在水平方向上不重复。

4. 设置背景图片在垂直方向上不重复

如果只希望在垂直方向上设置背景图片不重复，可以使用background-repeat属性，将其设置为repeat-y，例如：


div {
    background-image: url("images/bg.jpg");
    background-repeat: repeat-y;
}

上述代码指定了一个名为"bg.jpg"的图片作为div元素的背景，同时设置了背景图片在垂直方向上不重复。

5. 设置背景图片位置

使用background-position属性可以设置背景图片的位置，例如：


div {
    background-image: url("images/bg.jpg");
    background-repeat: no-repeat;
    background-position: center center;
}

上述代码指定了一个名为"bg.jpg"的图片作为div元素的背景，同时设置了背景图片居中显示。

6. 综合设置

我们可以综合设置背景图片不重复以及其位置，例如：


div {
    background-image: url("images/bg.jpg");
    background-repeat: no-repeat;
    background-position: center center;
}

上述代码指定了一个名为"bg.jpg"的图片作为div元素的背景，同时将其居中显示，且不重复。

以上是CSS如何设置背景图片不重复的方法。

css如何设置图片不重复