一个div设置多张背景图片

最新推荐文章于 2024-06-16 22:13:37 发布

原创最新推荐文章于 2024-06-16 22:13:37 发布 · 2.6k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#css #background #背景图

css 专栏收录该内容

12 篇文章

订阅专栏

本文介绍如何使用CSS在一个div元素中设置多张背景图片，并展示了具体的实现代码。通过使用逗号分隔的背景属性值，可以轻松实现复杂背景效果。

一个div设置多张背景图片，效果如下图

代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>一个div设置多张背景图</title>
	</head>
	<style type="text/css">
		.container{
			height: 1000px;
			width: 2000px;
			background: url(img/leaf1.png)  no-repeat left top,url(img/leaf2.png)  no-repeat right bottom;
			background-color:#00BFFF ;
		}
	</style>
	<body>
		<div class="container">
			其他内容
		</div>
	</body>
</html>