css背景属性_背景重复（CSS属性）

深藏阁楼爱情的钟 2022-12-03 11:26 219阅读 0赞

css背景属性

## 描述 **(**Description**)** ##

The `background-repeat` property controls whether or not a background-image is repeated (tiled), and if it is repeated, the property defines along which of the specified axes (x, y, or both) the image is to be repeated.

`background-repeat`属性控制是否重复(平铺)背景图像，如果重复，则该属性定义沿哪个指定轴(x，y或两个)重复图像。

By default, a `background-image` is repeated along both vertical and horizontal axes, and is repeated in both directions. We use the `background-repeat` property to specify the axis along which an image should be repeated.

默认情况下， `background-image`沿垂直轴和水平轴重复，并且在两个方向上重复。 我们使用`background-repeat`属性指定应重复图像的轴。

When a background image is repeated, it’s first placed according to the `background-position` property, and then begins repeating from that point in both directions. For example, a `background-image` that’s placed at a background-position of center center (the center of the element), and which has a background-repeat value of repeat, will repeat in both directions along the x and y axes—that is, up and down, left and right, starting from the center.

重复背景图像时，首先根据`background-position`属性放置它，然后从该点开始在两个方向上重复。 例如，一个`background-image` ，将其放置在中心中心(元件的中心)的背景位置，并具有重复的背景重复值，将重复在沿x轴和y轴，即两个方向上，上下左右从中心开始。

The background of an element is the area covered by the width and height of that element (whether those dimensions are set explicitly, or the content dictates them); it also includes the area covered by padding and borders. A background-color (or background-image) that’s applied to an element will appear beneath the foreground content of that element, and the area covered by the padding and border properties for the element. This coverage area is evident where an element has transparent (or dotted or dashed) borders, and the background is seen beneath the borders (or between the dots). Note that Internet Explorer versions up to and including 6 don’t support transparent borders.

元素的背景是该元素的宽度和高度覆盖的区域(无论这些尺寸是明确设置的，还是内容决定了它们的大小)； 它还包括填充和边框所覆盖的区域。 应用于元素的背景色(或背景图像)将显示在该元素的前景内容以及该元素的padding和border属性覆盖的区域下方。 此覆盖区域很明显，其中元素具有透明(或点缀或虚线)边框，并且在边框下方(或点之间)可以看到背景。 请注意，Internet Explorer 6或更高版本不支持透明边框。

Some area of the element in question must be visible if the background-image is to show through. If the element has no intrinsic height (either as defined by its content, or by its dimensions), the background won’t be visible. If an element contains only floated children that haven’t been cleared—see clear—no background will show, as the element’s height will be zero.

如果要显示背景图像，则必须可见该元素的某些区域。 如果元素没有固有高度(根据其内容或尺寸定义)，则背景将不可见。 如果元素仅包含尚未清除的浮动子元素(请参见clear)，则不会显示背景，因为元素的高度将为零。

The tiling and positioning of the background-image on inline elements isn’t defined in the CSS2.1 specification, but it might be addressed in future versions.

内联元素上的背景图像的平铺和定位未在CSS2.1规范中定义，但将来的版本中可能会解决。

## 例 **(**Example**)** ##

This style rule causes a `background-image` assigned to the element with ID `"example"` to repeat along the *x* axis:

此样式规则使分配给ID为`"example"`的元素的`background-image`沿*x*轴重复：

#example{
      background-repeat: repeat-x;
    }

## 值 **(**Value**)** ##

`repeat` `repeat`

The value `repeat` ensures that the `background-image` is repeated in both directions (that is, left and right, and up and down), and along both axes, until the element’s background is fully covered.

值`repeat`可以确保在两个方向(即左右，上下)和两个轴上重复`background-image` ，直到元素的背景被完全覆盖为止。

`repeat-x` `repeat-x`

The value `repeat-x` ensures that the `background-image` is repeated only along the *x* axis (that is, the horizontal axis in both directions—left and right) until the element’s background is fully covered along that axis.

值`repeat-x`确保`background-image`仅沿*x*轴(即左右两个方向的水平轴)沿*x*轴重复，直到元素的背景沿该轴完全覆盖为止。

`repeat-y` `repeat-y`

The value `repeat-y` ensures that the `background-image` is repeated only along the *y* axis (that is, the vertical axis in both directions—up and down) until the element’s background is fully covered along that axis.

值`repeat-y`确保`background-image`仅沿*y*轴(即上下两个方向的垂直轴)重复，直到元素的背景沿该轴完全覆盖为止。

`no-repeat` `no-repeat`

The value `no-repeat` ensures that the `background-image` is not repeated in any direction, and that only a single instance of the image will be placed at the coordinates specified by the `background-position`.

值`no-repeat`确保`background-image`不会在任何方向上重复，并且仅将图像的单个实例放置在`background-position`指定的坐标`background-position` 。

If no `background-position` has been specified, the image is placed at the element’s default left-top position (0,0).

如果未指定`background-position` ，则将图像放置在元素的默认左上位置(0,0)。

> 翻译自: [https://www.sitepoint.com/background-repeat-css-property/][https_www.sitepoint.com_background-repeat-css-property]

css背景属性

[https_www.sitepoint.com_background-repeat-css-property]: https://www.sitepoint.com/background-repeat-css-property/