css背景图片的滚动属性_背景图片（CSS属性）

css背景图片的滚动属性

描述 (Description)

This property sets the background image of an element via the specified URI. The image is placed on top of the background-color, and if the image is opaque, the background-color will not be visible beneath it. When you’re setting a background-image, also set a background-color, where possible, in case the image is unavailable.

此属性通过指定的URI设置元素的背景图像。 图像放置在background-color顶部，如果图像不透明，则在其下方将看不到background-color 。 设置背景图像时，请在可能的情况下还设置background-color ，以防图像不可用。

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.

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

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

所讨论元素的某些区域必须可见，这样background-image才能显示出来。 如果元素没有固有高度(由其内容或尺寸定义)，则背景将没有显示空间。 如果某个元素仅包含尚未清除的浮动子元素(请参见clear)，则背景将不会显示，因为该元素的高度将为零。

By default, the background-image is placed at the top-left (background-position) of the element; it’s repeated along the x and y axes (background-repeat) and will scroll with the document. These are the default settings that apply if you haven’t explicitly set any others, and can be adjusted with the other background properties. Refer to the other relevant stuff below for methods you can use to position and control the image.

默认情况下，背景图像位于元素的左上角(背景位置)； 沿x和y轴background-repeat ( background-repeat )，并将与文档一起滚动。 这些是默认设置，如果您未明确设置任何其他设置，则可以使用这些默认设置，并且可以使用其他背景属性进行调整。 请参阅下面的其他相关材料，以获取可用于定位和控制图像的方法。

例 (Example)

This style rule assigns a background image to the element with ID "example" :

此样式规则将背景图像分配给ID为"example"的元素：

#example {
  background-image:
  ➥    url(images/bg.gif);
}

值 (Value)

A URI value specifies a location at which the image can be found.

URI值指定可以找到图像的位置。

The value none ensures that no background-image will be displayed; this is the default setting, so you don’t need to define it explicitly unless you want to override previous background-image declarations.

值none确保不会显示背景图片； 这是默认设置，因此除非您要覆盖以前的background-image声明，否则无需显式定义它。

The value inherit would cause the element to inherit the background-image of its parent. This approach would not normally be taken, as the element’s inherited background image would most likely overlap the parent’s image. In most cases, the parent’s background-image will be visible through the element’s transparent background unless another background-image or background-color has been set.

值继承将使元素继承其父元素的background-image 。 通常不会采用这种方法，因为元素的继承背景图像很可能会重叠父对象的图像。 在大多数情况下，除非已设置其他background-image或background-color否则父元素的背景图像将通过元素的透明背景可见。

翻译自: https://www.sitepoint.com/background-image-css-property/

css背景图片的滚动属性