CSS利用background来实现多个背景图片
2024-12-06 08:59:02
要将两张图片分别放置在一个 div 的左下角和右上角，可以使用 CSS 的 background 属性和 background-position 属性来实现。以下是一个示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background Images</title>
<style>
.container {
position: relative;
width: 100%;
height: 400px; /* 根据需要调整高度 */
background-image: url('left-bottom-image.jpg'), url('right-top-image.jpg');
background-position: left bottom, right top;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>在这个示例中：
.container是包含背景图片的div。background-image属性用于指定两张图片，用逗号分隔。background-position属性用于指定每张图片的位置，第一个位置对应第一张图片，第二个位置对应第二张图片。background-repeat: no-repeat;确保图片不会重复。
请将 'left-bottom-image.jpg' 和 'right-top-image.jpg' 替换为实际的图片路径。
还没有人发表评论