如何从2个片段创建堆叠的图片？
如何从2个片段创建堆叠的图片？
提问于 2019-05-15 03:20:05
我写了一个个人网站。我使用背景图片作为标题页，使用我的肖像作为头像。我最喜欢的界面可能是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的个人资料一样。
回答 2
Stack Overflow用户
发布于 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的链接作为概念的证明。
Stack Overflow用户
发布于 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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56137215
复制相关文章
相似问题