Css 简明教程

CSS - Background Property

CSS 的 background 属性用于设置某个元素的背景。它既可用于应用单个背景图像或多个背景图像，也可用于定义背景颜色、大小、位置、重复行为和其他相关属性。

The background property of CSS is used to set the background of an element. It can be used to apply a single background image or multiple background images, as well as defining the background color, size, position, repeat behavior, and other related properties.

它是一个用于设置元素外观并向网页添加视觉趣味的多功能工具。

It is a versatile tool for styling the appearance of elements and adding visual interest to web pages.

background 是以下属性的简写：

The background is a shorthand for the following properties:

background-attachment: Specifies the position of the background relative to the viewport, either fixed or scrollable.
background-clip: Controls how far a background image extends beyond the element’s padding or content box.
background-color: Sets the background color of an element.
background-image: Sets one or more background image(s) on an element.
background-origin: Sets the origin of the background.
background-position: Sets the initial position of each image in a background.
background-repeat: Controls the repetition of an image in the background.
background-size: Controls the size of the background image.

Overview

The background property allows to set one or multiple layers of background, separated by commas.
Each layer in the background may have zero or atleast one occurrence of the following values: <attachment> <bg-image> <position> <bg-size> <repeat-style>
If *<bg-size>*is to be added, it must be included immediately after <position>, separated with '/'. For example: "left/50%".
Value of <box> can be included zero, one or two times. Based on the number of occurrences, following values are set: once - sets the values for both background-origin and background-clip. twice - first sets the value of background-origin and second sets the value of background-clip.
The value of background-color may be included in the last layer specified as background.

Possible Values

background 简写属性可以具有以下可能值：

Following are the possible values that the background shorthand property can have:

<attachment>: Specifies the position of the background, whether fixed or scrollable. Default is scroll.
<box>: Default is border-box and padding-box respectively.
<background-color>: Sets the color of the background. Default is transparent.
<bg-image>: Sets the one or more background image. Default is none.
<position>: Sets the initial position of the background. Default is 0% 0%.
<repeat-style>: Controls the repetition of the image in background. Default is repeat.
<bg-size>: Controls the size of the background image. Default is auto.

Syntax

background = background-color | bg-image | bg-position / bg-size | repeat-style | attachment | box;

CSS Background - With Image And Background color

以下是使用简写属性 background 设置背景的示例，其中指定了图像和背景颜色：

Here is an example of setting a background using the shorthand property background, where an image and background color is specified:

<html>
<head>
<style>
   body {
      background: url('images/scenery2.jpg') center/40% 50% no-repeat fixed padding-box content-box lightblue;
   }
</style>
</head>
<body>
   <h2>Shorthand Background</h2>
</body>
</html>

CSS Background - Image Repeat

以下是使用简写属性 background 设置背景的示例，其中重复了图像：

Here is an example of setting a background using the shorthand property background, where image is repeated:

<html>
<head>
<style>
   body {
      background: url('images/scenery2.jpg') repeat fixed padding-box content-box lightblue;
   }
</style>
</head>
<body>
   <h2 style="color: white;">Shorthand Background - background repeated</h2>
</body>
</html>

CSS Background - Image With Background Color

以下是使用简写属性 background 设置背景的示例，其中添加了两张图像和背景颜色：

Here is an example of setting a background using the shorthand property background, where two images are added and a background color:

<html>
<head>
<style>
   body {
      background: url('images/orange-flower.jpg') right bottom/30% 60% no-repeat,
      url('images/pink-flower.jpg') left top/30% 60% no-repeat lightgoldenrodyellow;
   }
</style>
</head>
<body>
   <h2 style="color: black; text-align: center;">Shorthand Background - two images</h2>
</body>
</html>