CSS - 背景（background ）样式_CSS 菜鸟教程

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

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

background 可以是以下属性的简写：

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

概述

background 属性允许设置一层或多层背景，用逗号分隔。

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 简写属性可以具有以下的值：

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

下面是使用 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>简写属性示例</h2>
</body>
</html>

CSS background - 图像重复

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

<html>
<head>
<style>  
	 body {
			background: url('images/scenery2.jpg') repeat fixed padding-box content-box lightblue;
	 }
</style>
</head>
<body>
	 <h2 style="color: white;">背景简写属性示例 - 背景重复</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;">背景简写属性示例 - 两个图像</h2>
</body>
</html>

CSS background 相关属性

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

属性	描述
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	确定元素的背景图像如何相互混合。

<< CSS - 颜色 CSS - 字体样式 >>