css背景图片
CSS can also be used to place images in the background of any element. The property to do so is called, not surprisingly, background-image:
CSS还可以用于将图像放置在任何元素的背景中。 毫不奇怪，这样做的属性称为background-image ：
body { background-image: url(‘images/gradient.gif’); }We cannot use src in the property value – that is an HTML attribute value, not a CSS property, and one reserved for use with the <img> tag. Nor can we use href or a link tag, for similar reasons. But once you are past the url prefix, the parentheses and the single quotes (or double quotes, or no quotes at all – any be used, so long as they are used consistently), the path to the image in the background-image property value is the same as if you were inserting an image directly on a page.
我们不能在属性值中使用src －这是HTML属性值，而不是CSS属性，并且是一个保留给<img>标记使用的值。 出于类似原因，我们也不能使用href或link标记。 但是，一旦您经过url前缀，括号和单引号(或双引号，或根本没有引号–只要使用一致，就可以使用任何引号)， background-image属性中的图像路径值与直接在页面上插入图像时的值相同。
An image can be placed in the background of any element. That being said, <body> is the most commonly used, so it will be used as the selectora> in this article.
图像可以放置在任何元素的背景中。 就是说， <body>是最常用的，因此在本文中它将用作选择器 a>。
Images used for backgrounds should usually be processed to lower their contrast or opacity, compressed to reduce file size and edited to create seamless integration if they repeat.
通常，应对用于背景的图像进行处理以降低其对比度或不透明度，对其进行压缩以减小文件大小，然后对其进行编辑以创建无缝整合(如果重复) 。
By default a background image will tesselate both horizontally and vertically through the space used by the element. To change that, alter the value of the background-repeat property:
默认情况下，背景图像将在元素使用的空间中水平和垂直镶嵌 。 要更改此设置，请更改background-repeat属性的值：
body {
background-image: url('images/watermark.png');
background-color: #faf;
background-repeat: no-repeat;
}Alternatively, and more efficiently, this could be written in a single line:
另外，也可以更有效地将其写在一行中：
body {
background: url('images/watermark.png') #faf no-repeat;
}Note the specification of a background-color alongside the background-color. While in most cases this color will never be seen (being covered by the image), it's still very important to set it: otherwise, your entire design relies on the expectation that the background image will always load. You should never make this assumption. By set the background color to reasonable mid-tonality of the image, content on top of either will still be readable, even if the image fails to load.
请注意background-color旁边的background-color规范。 尽管在大多数情况下，这种颜色是永远不会看到的(被图像覆盖)，但设置它仍然非常重要：否则，整个设计都依赖于始终加载背景图像的期望。 您永远都不要做这个假设。 通过将背景色设置为图像的合理中间色调，即使图像无法加载，仍可以读取其中任何一个的内容。
background-repeat can also take values of repeat-x (to tile horizontally) and repeat-y (to create vertical tiling of the background image).
background-repeat还可以采用repeat-x (水平平铺)和repeat-y (创建背景图像的垂直平铺)的值。
You can also position the background image in reference to your element. Note that the numerical origin of this position is the top left corner of the element’s box.
您还可以参考元素定位背景图像。 请注意，此位置的数字原点是元素框的左上角。
background-position: 20em 10px;The position values are always horizontal position followed by vertical position, separated by a space, unless the single keyword center is used (note the spelling). For the example above, the background-image would be 20em from the left side of the body and 10px from the top. The numerical position may be measured in any CSS unit, including negative values.
位置值始终是水平位置，后跟垂直位置 ，并用空格隔开，除非使用单个关键字center (请注意拼写)。 对于上面的示例， background-image距离主体左侧20em ，距离顶部10px 。 可以使用任何CSS单位 (包括负值)来测量数字位置。
background-position may also take keyword values: top, center and bottom for the vertical component, and left, center and right for the horizontal. background-position is left top by default. If you wish to have a background image in the center of the element, you can just use:
background-position也可以使用关键字值：vertical组件的top ， center和bottom ，horizontal组件的left ， center和right 。 默认情况下， background-position位于左上方 。 如果您希望在元素中心放置背景图片，则可以使用：
background-position: center;身高怪癖 (body height quirk)
You may find that web pages with relatively sparse content do not seem to place background images in the center of the browser window when background-position: center is used for a background image in the body, or repeat tiled images correctly. That’s because browsers obtain the vertical height of the body from the content of the page, not from the height of the browser window. To get around this problem, make a declaration for body using vh units:
您可能会发现，当background-position: center用于正文中的背景图像时，内容相对稀疏的网页似乎没有将背景图像放置在浏览器窗口的background-position: center ，或者正确地重复了平铺的图像。 那是因为浏览器是从页面的内容而 不是从浏览器窗口的高度获取正文的垂直高度 。 要解决此问题，请使用vh单位声明body ：
body { min-height: 100vh; }By default the background image will move with the rest of the content as the user scrolls the web page up and down. If you want to change this, set the background-attachment property to fixed.
默认情况下，当用户上下滚动网页时，背景图像将与其余内容一起移动。 如果要更改此设置，请将background-attachment属性设置为fixed 。
CSS has added many other properties and possibilities for background images, including multiple images and resizing.
CSS为背景图像添加了许多其他属性和可能性，包括多个图像和调整大小 。
css背景图片
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
