甚至史蒂文斯（Stevens）：在重复的背景图片中使用圆形和空格

Using cover and contain values for the background-size property makes it easy to create background images that cover the complete browser window, but for a very long time web developers didn’t have control over much else: smaller tiled images repeated infinitely in backgrounds, with no control over how they started or finished.

通过使用cover和contain来设置background-size属性的值，可以轻松创建覆盖整个浏览器窗口的背景图片 ，但是很长一段时间以来，网络开发人员无法控制其他事情：在背景中无限重复的较小的平铺图片，无法控制他们的开始或完成方式。

By default, background images tile both vertically and horizontally; CSS provided the opportunity to constrain this to one axis with background-repeat: repeat-x or background-repeat: repeat-y, but that’s as far as it went. What designers needed was “flexbox for backgrounds”: the ability to evenly distribute tiled images.

默认情况下，背景图像在垂直和水平方向上都平铺； CSS提供了机会，可以使用background-repeat: repeat-x或background-repeat: repeat-y将其限制在一个轴上，但这已经尽其所能了。 设计师需要的是“背景弹性盒 ”： 均匀分布平铺图像的能力。

With the release of Firefox 49, that feature is now available in every major browser, in the form of round and space values.

随着Firefox 49的发布，该功能现在可以在每个主流浏览器中以round值和space值的形式使用。

一轮接一轮 (Round & Round)

background-repeat: round ensures even tiling of repeated images in backgrounds: tiles always end on a complete version of the image. As one example, for the body:

background-repeat: round确保在背景中平铺重复图像 ：图块始终以完整版本的图像结尾。 例如，对于body ：

body { 
    min-height: 100vh;
    background: url(steven-tyler.jpg); 
    background-repeat: round;
}

Note that this requirement for an “even end” will mean that the image will be stretched or squished until there is either enough space for another tile row (or column), or a row or column of images can be removed. You can see this in the example at the top of this article, as you resize the browser window.

请注意，对“偶数结束”的要求将意味着图像将被拉伸或压缩，直到有足够的空间容纳另一个图块行(或列)，或者可以删除图像的行或列。 调整浏览器窗口的大小时，可以在本文顶部的示例中看到这一点。

Note that using a single percentage value for background-size is equivalent to the effect of round except:

请注意，对background-size使用单个百分比值等效于round入的效果， 除了：

1. The image is only tiled evenly on the horizontal axis, not vertically
   图像仅在水平轴上平铺，而不在垂直方向上平铺
2. So long as a single value is used, the image is never stretched.
   只要使用单个值，就不会拉伸图像。

3. There will always be the same number of tiles across the background, meaning that individual image tiles may become very small at narrow viewport sizes without @media query intervention.

   整个背景上将始终有相同数量的图块 ，这意味着在没有@media查询干预的情况下，单个图像图块在狭窄的视口尺寸下可能会变得非常小。

It’s also important to note that round is in effect both horizontally and vertically for background images by default; I discuss variations at the end of this article.

同样重要的是要注意， round实际上是水平和垂直方向的默认背景图片; 我将在本文结尾处讨论变体。

Very frequently you’ll need to resize the image to make it fit in certain designs:

很多时候，您需要调整图像的大小以使其适合某些设计：

body { 
    min-height: 100vh;
    background: url(steven-tyler.jpg); 
    background-repeat: round;
    background-size: 200px 200px;
}

As always, be careful of resizing images too far for backgrounds. If designing for High-DPI screens, image-set() may be useful for sending different sized versions of the background image to Retina screens.

与往常一样，请注意将图像的尺寸调整得太大，以至于与背景无关。 如果设计用于高DPI屏幕，则image-set()可能对于将不同尺寸的背景图像发送到Retina屏幕很有用。

间隔开 (Spaced)

Contrary to what you might assume from the name, space does not allow you to control the spacing between image tiles; rather, it adjusts the space between the tiles relative to the size of the containing element, allowing repetitions to fill in the space where needed.

与您可能会从名称中假设的相反， space不允许您控制图像图块之间的间距。 相反，它相对于包含元素的大小来 调整图块之间的空间，从而允许重复项填充所需的空间。

Starting with an image like this:

从这样的图像开始：

We can tile the image in the background of a <header> with:

我们可以使用以下方法将图像平铺在<header>的背景中：

body > header { 
    min-height: 200px;
    background-image: url(aerosmith-logo.svg);
    background-size: 200px;
}

We can let the browser determine where to space the logo by adding:

我们可以让浏览器通过添加以下内容来确定徽标的位置：

body > header { 
    background-repeat: space;
}

Producing the following: the effect is best seen if you resize the browser window.

产生以下结果：如果调整浏览器窗口的大小，则效果最佳。

background-repeat: space might be compared to text-align: justify;: it moves background tiles around to take up the space provided to it. Alternatively, it might be thought of as the opposite of round: it lets image tiles expand apart, without stretching, until another row or column of tiles can be inserted.

background-repeat: space可以将background-repeat: space与text-align: justify; ：它会移动背景图块以占用为其提供的空间。 或者，可以将其视为round的反义词 ：它使图像图块展开而无需拉伸 ，直到可以插入另一行或另一列图块为止。

Absolute control over space between tiles in a repeated background image will still mean editing the original graphic to add more space to it, and viewing the result in the browser. It’s possible in some cases to do this easier with SVG <pattern> elements.

在在重复的背景图像块之间的空间绝对的控制权仍然意味着编辑原始图形，以更多的空间添加到它 ，并在浏览器中查看结果。 在某些情况下，使用SVG <pattern>元素可以使此操作更容易。

组合 (Combination)

A single value of round or space for background-repeat will affect image tiles in both directions for an element, but it’s entirely possible to use round and space together to affect tiles in different ways; some combinations of these values are shown in the CodePen associated with this article.

对于background-repeat单个的round或space值会在一个元素的两个方向上影响图像平铺，但是完全可以同时使用round和space来以不同的方式影响平铺； 与本文相关的CodePen中显示了这些值的一些组合。

只是推播放 (Just Push Play)

Browser support for round and space is now excellent: outside of Firefox 49, it’s supported in IE 9+, Opera 10.5+, and essentially every version of every other modern browser.

现在，浏览器对round和space支持非常出色：在Firefox 49之外，IE 9 +，Opera 10.5+以及几乎所有其他现代浏览器的每个版本都支持它。

It should also be noted that Firefox 49 also brings support for background-position-x background-position-y, bringing those features into parity with all other modern browsers.

还应注意，Firefox 49还提供了对background-position-x background-position-y ，从而使这些功能与所有其他现代浏览器相当。

翻译自: https://thenewcode.com/1143/Even-Stevens-Using-Round-and-Space-in-Repeated-Background-Images