我在HTML，CSS中遇到了问题。 我有 1 个div 和 2 个图像在他身上。 第一张图片是背景，第二张图片是我无法带到中心的头像图像。 我尝试使用保证金：0 自动;和显示：块;但不是工作。
网页： https://i.stack.imgur.com/vzi9s.jpg
它应该如何看起来：https://i.stack.imgur.com/WgX6C.jpg
.avatar {
width: 15%;
position:absolute;
}
.img-home {
width: 100%;
height: 100vh;
}
.content {
float:right;
width:75%;
height: 100rem;
}
.HTML：
<div class="content">
<img src="images/avatar.png" class="avatar">
<img src="images/bg.jpeg" class="img-home">
</div>
您可以使用以下属性直接使用 css 设置容器div 的背景图像：
background-image: url("paper.gif");
对于头像对齐，我个人会使用弹性盒。这是一个完整的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
display: flex;
align-items: center;
justify-content: center;
height: 800px;
width: 1200px;
background-image: url("https://images.pexels.com/photos/36744/agriculture-arable-clouds-countryside.jpg?auto=compress&cs=tinysrgb&h=350");
background-repeat:no-repeat;
background-size: cover;
}
.image{
width: 300px;
height: 400px;
}
</style>
</head>
<body>
<div class="container">
<img src="https://www.mercurynews.com/wp-content/uploads/2018/02/craig_03.jpg?w=620" class="image"/>
</div>
</body>
</html>