CSS - 多种背景_CSS 菜鸟教程

在 CSS 中，您可以为一个元素使用多个背景图像。第一个背景应该层叠在上面，最后一个背景应该层在后面。只有最后一个背景才能具有背景颜色。

语法

.multibackgrounds {
	 	background:
	 	 	 background1,
	 	 	 background2,
	 	 	 /* …, */ backgroundN;
}

您可以使用速记和单个背景属性，不包括 background-color。

以下背景属性可以作为一个列表提供，每个背景对应一个：background、background-attachment、background-clip、background-image、background-origin、background-position、background-repeat、background-size。

CSS 多个背景 - 使用 background-image 属性

以下示例演示如何使用 background-image 属性添加两个背景图像，其中第一个图像堆叠在顶部，第二个图像位于其后面 -

<html>
<head>
<style>
	 	.multibackgrounds {
	 	 	 background-image: url(images/logo.png), url(images/see.jpg);
	 	 	 background-position: left top, right top;
	 	 	 background-repeat: no-repeat, repeat;
	 	 	 padding: 70px;
	 	}
</style>
</head>
<body>
	 	<div class="multibackgrounds">
	 	 	 <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
	 	</div>
</body>
</html>

CSS 多个背景 - 使用 background-size 属性

以下示例演示如何使用 background-size 属性使用多个不同大小的背景图像。第一张图片的大小为 150px，第二张图片的大小为 300px -

<html>
<head>
<style>
	 	.multibackgrounds{
	 	 	 background-image: url(images/logo.png), url(images/see.jpg);
	 	 	 background-position: left top, right top;
	 	 	 background-repeat: no-repeat, repeat;
	 	 	 padding: 70px;
	 	}
	 	.multibackgrounds-size {
	 	 	 background-image: url(images/logo.png), url(images/see.jpg);
	 	 	 background-position: left top, right top;
	 	 	 background-repeat: no-repeat, repeat;
	 	 	 background-size: 150px, 300px;
	 	 	 padding: 70px;
	 	}
</style>
</head>
<body>
	 	 	 <h3>Without Sizing</h3>
	 	<div class="multibackgrounds">
	 	 	 <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
	 	</div><br>
	 	<h3>With Sizing</h3>
	 	<div class="multibackgrounds-size">
	 	 	 <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
	 	</div>
</body>
</html>

CSS 多个背景 - 使用 background 属性

以下示例演示了如何使用速记属性 background 添加三个背景图像 -

<html>
<head>
<style>
	 	.multibackgrounds-size {
	 	 	 background: url(images/logo.png), 	url(images/pink-flower.jpg), url(images/see.jpg);
	 	 	 background-position: left top, center, right top;
	 	 	 background-repeat: no-repeat, no-repeat, no-repeat;
	 	 	 background-size: 150px, 100px, 550px;
	 	 	 padding: 70px;
	 	 	 color: yellow;
	 	}
</style>
</head>
<body>
	 	<div class="multibackgrounds-size">
	 	 	 <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
	 	</div>
</body>
</html>

CSS 多种背景 - 全尺寸图像

以下示例演示了使用 background-size 设置的全尺寸背景图像： cover 属性 -

<html>
<head>
<style>	
	 	html {	
	 	 	 background: url(images/red-flower.jpg) no-repeat center fixed;	
	 	 	 background-size: cover;
	 	 	 color: yellow;	
	 	}
</style>
</head>
<body>
	 	<h1>Red Flower Image</h1>
	 	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</body>
</html>

CSS 多背景 - 主图片

以下示例演示了主图像的设置，指的是在 <div> 上使用不同背景属性的带有文本的大图像:

<html>
<head>
<style>
	 	.background-img {
	 	 	 background: url(images/see.jpg) no-repeat center;	
	 	 	 background-size: cover;
	 	 	 height: 300px;
	 	 	 position: relative;
	 	}
	 	.background-text {
	 	 	 text-align: center;
	 	 	 position: absolute;
	 	 	 top: 40%;
	 	 	 left: 50%;
	 	 	 transform: translate(-50%, -50%);
	 	 	 color: red;
	 	}
	 	button {
	 	 	 	 	background-color: yellow;
	 	 	 	 	padding: 10px;
	 	}
</style>
</head>
<body>
	 	<div class="background-img">
	 	 	 <div class="background-text">
	 	 	 	 	<h1>See Image</h1>
	 	 	 	 	 	 <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
	 	 	 	 	<button>Click Me</button>
	 	 	 </div>
	 	</div>
</body>
</html>

CSS 多背景 - 使用 background-origin 属性

以下示例演示了如何使用 background-origin 属性将背景图像定位在框中 -

<html>
<head>
<style>
	 	div {
	 	 	 width: 200px;
	 	 	 height: 150px;
	 	 	 border: 7px solid blue;
	 	 	 padding: 30px;
	 	 	 background: url(images/pink-flower.jpg);
	 	 	 background-repeat: no-repeat;
	 	 	 margin: 10px;
	 	}
	 	P {
	 	 	 color: yellow;
	 	}
	 	h3 {
	 	 	 color: red;
	 	}
	 	.box1 {
	 	 	 background-origin: padding-box;
	 	}
	 	.box2 {
	 	 	 background-origin: border-box;
	 	}
	 	.box3 {
	 	 	 background-origin: content-box;
	 	}
</style>
</head>
<body>
	 	<div class="box1">
	 	 	 <h3>background-origin: padding-box</h3>
	 	 	 <p>Background image is positioned relative to the padding box.</p>
	 	</div>
	 	<div class="box2">
	 	 	 <h3>background-origin: border-box</h3>
	 	 	 <p>Background image is positioned relative to the border box.</p>
	 	</div>
	 	<div class="box3">
	 	 	 <h3>background-origin: content-box</h3>
	 	 	 <p>Background image is positioned relative to the content box.</p>
	 	</div>
</body>
</html>

CSS 多个背景 - 使用 background-clip 属性

以下示例演示了如何使用 background-clip 属性在框中显示背景图像 -

<html>
<head>
<style> 	
	 	p {
	 	 	 width: 200px;
	 	 	 height: 150px;
	 	 	 border: 8px solid blue;
	 	 	 margin: 10px;
	 	 	 padding: 30px;
	 	 	 color: yellow;
	 	 	 background: url(images/pink-flower.jpg);
	 	}
	 	.box1 {
	 	 	 background-clip: border-box;
	 	}
	 	.box2 {
	 	 	 background-clip: padding-box;
	 	}
	 	.box3 {
	 	 	 background-clip: content-box;
	 	}
</style>
</head>
<body>
	 	<p class="box1">Background image is applied to the entire element.</p>
	 	<p class="box2">Background image is applied to the padding area.</p>
	 	<p class="box3">Background image is applied only to the content area.</p>
</body>
</html>

CSS 多个背景 - 相关属性

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

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

<< CSS - border-image（边框图像）属性 CSS - 渐变 >>