我写了一个个人网站。我使用背景图片作为标题页,使用我的肖像作为头像。我最喜欢的界面可能是Linkedin profile。但是我不能把两张照片叠在一起。
我用的是bootstrap 3。我的html:
<div class="head-image">
</div>
<img src="assets/images/ava_Do.png" alt="ava_Do" id="ava_image">
我的CSS:
body, html {
height: 100%;
margin: 0;
}
.head-image {
/* Full height */
height: 35%;
background-image: url(../assets/images/image.png);
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
z-index: 0;
}
#ava_image {
position: absolute;
max-width: 100px;
top: 20%
z-index: 1;
}
我想把它们堆叠起来,就像Linkedin的个人资料一样。
发布于 2019-05-15 03:31:35
我假设您的意思是希望将项目堆叠在z索引上。
用于显示背景图像和肖像覆盖的标记:
<div class="head-background">
<img class="head-image" src="http://placehold.it/150x150" alt="Placeholder">
</div>
正确定位它们的样式:
.head-background {
background: #666;
height: 200px;
position: relative;
z-index: 0;
}
.head-image {
border-radius: 50%;
left: 15px;
position: absolute;
top: 100%;
transform: translateY(-75%);
z-index: 1;
}
我已经附加了一个JSFiddle的链接作为概念的证明。
发布于 2019-05-15 03:31:15
在您的html中尝试一下:
<div class="head-image">
<img src="assets/images/ava_Do.png" alt="ava_Do" id="ava_image">
</div>
您可能关闭了这个标记:<div> </div>
https://stackoverflow.com/questions/56137215
复制相似问题