css背景图片_CSS背景

css背景图片

The background of an element can be changed using several CSS properties:

可以使用几个CSS属性来更改元素的背景：

• background-color

  background-color

• background-image

  background-image

• background-clip

  background-clip

• background-position

  background-position

• background-origin

  background-origin

• background-repeat

  background-repeat

• background-attachment

  background-attachment

• background-size

  background-size

and the shorthand property background, which allows to shorten definitions and group them on a single line.

以及简写属性background ，它可以缩短定义并将它们分组在一行中。

background-color accepts a color value, which can be one of the color keywords, or an rgb or hsl value:

background-color接受一个颜色值，该值可以是color关键字之一，也可以是rgb或hsl值：

p {
  background-color: yellow;
}

div {
  background-color: #333;
}

Instead of using a color, you can use an image as background to an element, by specifying the image location URL:

通过指定图像位置URL，可以将图像用作元素的背景，而不必使用颜色：

div {
  background-image: url(image.png);
}

background-clip lets you determine the area used by the background image, or color. The default value is border-box, which extends up to the border outer edge.

background-clip使您可以确定背景图像或颜色使用的区域。 默认值为border-box ，它一直延伸到边框的外边缘。

Other values are

其他值是

• padding-box to extend the background up to the padding edge, without the border

  padding-box将背景延伸到填充边缘，没有边框

• content-box to extend the background up to the content edge, without the padding

  content-box可将背景扩展到内容边缘，而无需填充

• inherit to apply the value of the parent

  inherit以应用父项的值

When using an image as background you will want to set the position of the image placement using the background-position property: left, right, center are all valid values for the X axis, and top, bottom for the Y axis:

当使用图像作为背景时，您将需要使用background-position属性设置图像放置background-position ： left ， right ， center都是X轴的有效值，而top ， bottom是Y轴的有效值：

div {
  background-position: top right;
}

If the image is smaller than the background, you need to set the behavior using background-repeat. Should it repeat-x, repeat-y or repeat on all the axis? This last one is the default value. Another value is no-repeat.

如果图像小于背景，则需要使用background-repeat设置行为。 它应该在所有轴上repeat-x ， repeat-y还是repeat ？ 最后一个是默认值。 另一个价值是no-repeat 。

background-origin lets you choose where the background should be applied: to the entire element including padding (default) using padding-box, to the entire element including the border using border-box, to the element without the padding using content-box.

background-origin允许您选择应用背景的位置：使用padding-box到包括填充的整个元素(默认)，使用border-box到包括边框的整个元素，使用content-box到没有填充的元素。

With background-attachment we can attach the background to the viewport, so that scrolling will not affect the background:

使用background-attachment我们可以将背景附加到视口，因此滚动不会影响背景：

div {
  background-attachment: fixed;
}

By default the value is scroll. There is another value, local. The best way to visualize their behavior is this Codepen.

默认情况下，值是scroll 。 还有另一个值local 。 可视化其行为的最佳方法是此Codepen 。

The last background property is background-size. We can use 3 keywords: auto, cover and contain. auto is the default.

最后一个背景属性是background-size 。 我们可以使用3个关键字： auto ， cover和contain 。 auto是默认设置。

cover expands the image until the entire element is covered by the background.

cover扩展图像，直到整个元素被背景覆盖。

contain stops expanding the background image when one dimension (x or y) covers the whole smallest edge of the image, so it’s fully contained into the element.

当一个维度(x或y)覆盖图像的整个最小边缘时， contain停止扩展背景图像，因此将其完全包含在元素中。

You can also specify a length value, and if so it sets the width of the background image (and the height is automatically defined):

您还可以指定一个长度值，如果这样，它将设置背景图像的宽度(并且高度是自动定义的)：

div {
  background-size: 100%;
}

If you specify 2 values, one is the width and the second is the height:

如果指定2个值，则一个为宽度，第二个为高度：

div {
  background-size: 800px 600px;
}

The shorthand property background allows to shorten definitions and group them on a single line.

速记属性background允许缩短定义并将它们分组在一行上。

This is an example:

这是一个例子：

div {
  background: url(bg.png) top left no-repeat;
}

If you use an image, and the image could not be loaded, you can set a fallback color:

如果使用图像，但无法加载图像，则可以设置后备颜色：

div {
  background: url(image.png) yellow;
}

You can also set a gradient as background:

您还可以将渐变设置为背景：

div {
  background: linear-gradient(#fff, #333);
}

翻译自: https://flaviocopes.com/css-backgrounds/

css背景图片