使用 CSS3 添加多个背景

cssweb developmentfront end technology更新于 2025/12/10 23:40:17

要添加多个背景，请使用 CSS 中的 background-image 属性。以下是添加多个背景的代码 −

示例

<!DOCTYPE html>
<html>
<head>
<style>
body {
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
div {
   background-image:
   url("http://pngimg.com/uploads/autumn_leaves/autumn_leaves_PNG3613.png"),
   url("https://i.picsum.photos/id/256/1200/300.jpg");
   background-position: left bottom, left top;
   background-repeat: repeat, repeat;
   padding: 15px;
}
p {
   font-size: 18px;
}
</style>
</head>
<body>
<h1>Multiple Backgrounds using CSS</h1>
<div>
<h1>Some Sample Text</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem, ipsum
dolorem? Adipisci accusantium eveniet necessitatibus beatae est, dolorum
nobis minima aliquam atque id at sapiente culpa, alias nulla rem.
Aliquam, modi repellendus fugiat dolore, blanditiis praesentium quam
doloribus possimus doloremque reprehenderit corporis enim distinctio,
ducimus nisi. Voluptatum vel repudiandae omnis.
</p>
</div>
</body>
</html>