css背景属性
The background-position property defines the initial position of a background-image. We can repeat the image from this position using the background-repeat property, which will cause the image to be repeated in both directions along the specified axis: see background-repeat.
background-position属性定义背景图像的初始位置。 我们可以使用background-repeat属性从该位置重复图像，这将导致图像沿指定轴在两个方向上重复 ：请参阅background-repeat 。
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).
元素的背景是该元素的宽度和高度覆盖的区域(无论这些尺寸是明确设置的，还是内容决定了它们的大小)； 它还包括填充和边框所覆盖的区域。 应用于元素的background-color (或background-image )将出现在该元素的前景内容之下，以及该元素的padding和border属性覆盖的区域。 此覆盖区域很明显，其中元素具有透明(或dotted或dashed )边框，并且在边框下方(或点之间)可以看到背景。
Some area of the element must be visible so that the background-image is able to show through. If the element has no intrinsic height (defined either by its content or by its dimensions), there will be no space in which the background can be seen. Similarly, if an element contains only floated children that haven’t been cleared—see clear—there will be no background to show, as the element’s height will be zero.
元素的某些区域必须是可见的，以便background-image能够显示出来。 如果元素没有固有高度(由其内容或尺寸定义)，则将没有空间可以看到背景。 同样，如果元素仅包含尚未清除的浮动子元素(请参见clear) ，则不会显示背景，因为元素的高度为零。
If no background-position has been specified, the image is placed at the default top-left position of the element (0,0), which is located within the top-left corner of the element, just inside the border at the outside edge of the padding box.
如果未指定background-position ，则将图像放置在元素(0,0)的默认左上位置，该位置位于元素的左上角，就在外部边缘的边框内填充框。
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规范中定义，但将来的版本中可能会解决。
This style rule places a background-image at a position that’s 100 pixels from the left and 200 pixels from the top of the element with ID “example” :
此样式规则将背景图像放置在ID为“ example”的元素的左方100像素和顶部200像素的位置：
#example{ background-position: 100px 200px; }This property accepts one or two length values, percentages, or keywords.
此属性接受一个或两个长度值，百分比或关键字。
If only one value is specified for background-position, the second value is assumed to be center. Where two values are used, and at least one is not a keyword, the first value represents the horizontal position, and the second represents the vertical position.
如果仅为background-position指定一个值，则假定第二个值为center 。 在使用两个值且至少一个不是关键字的情况下，第一个值表示水平位置，第二个值表示垂直位置。
A length value places the top-left corner of the background-image at the exact horizontal and vertical position specified.
长度值将背景图像的左上角放置在指定的确切水平和垂直位置。
Note that when the background-position is defined with a percentage value, that position refers to both the element itself and the corresponding point on the background-image. For example, a background-image with background-position values of 50% 50% will place the point of the image that’s located at 50% of the image’s width and 50% of the image’s height at a corresponding position within the element that contains the image. In the above case, this causes the image to be perfectly centered. This is an important point to grasp—using background-position isn’t the same as placing an element with absolute position using percentages where the top-left corner of the element is placed at the position specified.
请注意，当用百分比值定义background-position时，该位置既指元素本身，也指background-image上的对应点。 例如， background-image位置值为50% 50%的background-image会将位于图像宽度50％和高度50％的图像点放置在包含该元素的元素内的相应位置图片。 在上述情况下，这会使图像完美居中。 这是要理解的重要点-使用background-position与使用百分比将元素的绝对位置放置在绝对位置上是不同的，其中百分比将元素的左上角放置在指定位置。
翻译自: https://www.sitepoint.com/background-position-css-property/
css背景属性
