CSS - 背景

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

它是一种多功能工具，用于设置元素外观的样式并为网页添加视觉趣味。

背景是以下属性的简写：

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

概述

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 的值可以包含在指定为 background 的最后一层中。

可能的值

以下是 background shorthand 属性可以具有的可能值：

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

语法


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

CSS 背景 - 带有图像和背景颜色

下面是使用速记属性 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 设置背景的示例，其中图像重复：


<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 - 带有背景颜色的图像

下面是使用速记属性 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>

CSS 背景相关属性

下表列出了与背景相关的所有属性：

属性	描述
background	背景相关属性的简写。
background-attachment	指定背景相对于视口的位置，可以是固定的，也可以是可滚动的。
background-clip	控制背景图像超出元素的填充框或内容框的长度。
background-color	设置元素的背景色。
background-image	在元素上设置一个或多个背景图像。
background-origin	设置背景的原点。
background-position	设置每个图像在背景中的初始位置。
background-position-x	设置每个图像在背景中的初始水平位置。
background-position-y	设置每个图像在背景中的初始垂直位置。
background-repeat	控制图像在背景中的重复。
background-size	控制背景图像的大小。
background-blend-mode	确定元素的背景图像如何相互混合。

打印本页