Css 简明教程

CSS - Background Property

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

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

background 是以下属性的简写：

background-attachment ：指定背景相对于视口的固定还是可滚动的位置。
background-clip ：控制背景图像超出元素填充或内容框的程度。
background-color ：设置元素的背景颜色。
background-image ：设置元素上的一个或多个背景图像。
background-origin ：设置背景的原点。
background-position ：设置背景中每张图像的初始位置。
background-repeat ：控制背景中图像的重复。
background-size ：控制背景图像的大小。

Overview

background 属性允许设置用逗号分隔的一个或多个背景层。
背景中的每一层可以具有以下值零次或至少一次： <attachment> <bg-image> <position> <bg-size> <repeat-style>
如果要添加 <bg-size>，则必须直接在 <position> 之后用 '/' 隔开添加。例如："left/50%"。
<box> 的值可以包含零、一或两次。根据出现次数，设置以下值： once - 为 background-origin 和 background-clip 设置值。 twice - 首先设置 background-origin 的值，然后设置 background-clip 的值。
background-color 的值可以包含在指定为背景的最后一层中。

Possible Values

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

<attachment> ：指定背景的位置，是固定还是可滚动。默认为 scroll 。
<box> ：分别默认为 border-box 和 padding-box 。
<background-color> ：设置背景颜色。默认为 transparent 。
<bg-image> ：设置一个或多个背景图像。默认为 none 。
<position> : 设置背景的初始位置。默认值为 0% 0% 。
<repeat-style> : 控制背景中图像的重复。默认值为 repeat 。
<bg-size> : 控制背景图像的大小。默认值为 auto 。

Syntax

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

CSS Background - With Image And Background color

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

<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 设置背景的示例，其中重复了图像：

<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 设置背景的示例，其中添加了两张图像和背景颜色：

<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>