背景重复（CSS属性）

描述

背景重复属性控制是否重复一个背景图像（瓷砖），如果重复该属性，则该属性将沿指定的轴（x，y或两者）定义图像。 默认情况下，沿垂直轴和水平轴重复一个背景图像，并在两个方向上重复。我们使用背景重复属性来指定应重复图像的轴。

重复背景图像时，它首先根据背景位置属性放置，然后在两个方向上从该点开始重复。例如，位于中心中心（元素中心）的背景位置，具有重复的背景重复值的背景图像将在X和Y轴上的两个方向上重复，即从中心，从中心开始。

元素的背景是该元素的宽度和高度所覆盖的区域（无论这些尺寸是明确设置的，还是内容决定它们）；它还包括填充和边界覆盖的区域。应用于元素的背景色（或背景图像）将出现在该元素的前景含量下方，以及该元素的填充和边框属性所覆盖的区域。如果元素具有透明（或虚线或虚线）边界，并且在边界下（或点之间）看到背景。请注意，Internet Explorer版本和包括6个不支持透明边界。> 如果要显示背景图像，则必须看到所讨论元素的某些区域。如果该元素没有内在的高度（由其内容定义，或由其尺寸定义），则将看不到背景。如果元素只包含尚未清理的浮子孩子（请参阅清晰），则不会显示出来，因为该元素的高度将为零。

在CSS2.1规范中未定义

背景图像在内联元素上的平铺和定位，但可以在以后的版本中解决。

示例

此样式规则导致一个背景图像分配给元素，并带有ID“示例”，以沿 x

轴重复：

value

重复 >

值重复可确保在两个方向上重复背景图像（即，左右，上下），并沿两个轴重复，直到元素的背景被完全覆盖为止。

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

>

重复X

>

值重复X可确保仅沿 x 轴重复背景图像（即两个方向的水平轴 - 左左右），直到元素的背景沿该轴完全覆盖为止。>>>>>>>>>

>重复

值重复y可确保仅沿轴（即，两个方向上的垂直轴 - up和向下）重复背景图像，直到元素的背景沿该轴完全覆盖。 no-repeat

>

值no-Repeat可确保不会在任何方向上重复背景图像，并且仅将图像的一个实例放置在背景位置指定的坐标上。

。

如果没有指定背景位置， 图像放置在元素的默认左上位置（0,0）。

经常询问有关CSS背景重复属性的问题（常见问题解答）

>在CSS背景重复属性中“重复X”和“重复Y”之间有什么区别？

>在CSS背景重复属性中，“重复X”和“重复X”和“重复Y”值分别用于控制背景图像的重复水平和垂直。当使用“重复X”时，仅水平重复背景图像，从左到右创建连续图案。另一方面，当使用“重复Y”时，仅垂直重复背景图像，从上到下创建连续图案。当您想控制背景图像重复的方向时，这些属性很有用。

>“ no-repeat'值在CSS背景 - 重复属性中如何工作？

>

>“ no-repeat>”>“ no-repeat”值在CSS背景重复属性中只需在您想要的背景图像时就只能出现一次并且不重复一次。设置此值时，背景图像将放置在背景位置属性指定的位置上，并且不会重复或瓷砖。当您拥有一个单个图像而无需重复的单个图像时。当您使用多个背景图像时，这特别有用。您可以通过用逗号分隔每个值来为每个背景图像指定不同的重复值。第一个值对应于第一个背景图像，第二个值对第二个图像，依此类推。

>

>“空间”值在CSS背景重复属性中如何工作？

> CSS背景重复属性中的“空间”值用于两个方向上的背景图像。这些图像均匀地间隔，第一个也是最后一个图像触及了元素的边缘。如果可用的空间不足以进行更多图像，则可以调整这些图像以适合。当您想保持背景图像的每个重复之间保持一致的空间时，这可能很有用。

>

在CSS背景重复属性中的“回合”值是什么？

在CSS背景重新播放中，“回合”值在不剪接的情况下尽可能地重复背景图像。调整图像的大小，以便可以在元素内重复多次。当您想确保在没有任何剪辑的情况下可见整个背景图像时，这可能很有用。

>“继承”值在CSS背景重复属性中如何工作？

>在CSS背景重复属性中使用“继承”值，用于使元素从其父母元素中sartar sartharthent reaction-repeat属性。这意味着该元素的背景图像的重复值将与其父元素的重复值相同。

我可以使用带有梯度的CSS背景重复属性吗？

是的，您可以将CSS背景重复属性与梯度一起使用。当与梯度一起使用时，背景重复属性将根据指定值重复梯度模式。当您要创建重复梯度效应时，这可能很有用。

>“初始”值在CSS背景重复属性中如何起作用？

> CSS背景重复属性中的“初始”值用于将属性设置为其默认值。这意味着背景图像将水平和垂直重复，这是背景重复属性的默认行为。

>

>如果我不指定CSS背景重复属性值的值，会发生什么？

>如果您不指定CSS背景属性的值，则默认属性，则默认值，默认值是“ repoy”。这意味着背景图像将水平和垂直重复。

我可以仅在一个方向上控制背景图像的重复吗？您可以使用“重复X”值水平重复图像，或“重复Y”值垂直重复图像。当您想使用背景图像创建水平或垂直图案时，这可能很有用。

以上是背景重复（CSS属性）的详细内容。更多信息请关注PHP中文网其他相关文章！