在flex-box容器中将两个图像叠加在一起
在flex-box容器中将两个图像叠加在一起
提问于 2021-08-06 14:31:12
我有两个图像，我想放在彼此的顶部-例如一个产品(内部)和一个“折扣”-banner(外部)。
目前，我在a-tag中有一个镜像，其中a-tag是一个弹性框容器，这样我就可以使用align-items和justify-content。
我的HTML如下所示
.image-wrapper {
height: 50%;
margin-top:20px;
flex-grow: 1;
}
.image-wrapper a{
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.image-wrapper img{
width: auto;
max-height: 100%;
}<div class="image-wrapper">
<a href="{{p.link}}" target="_blank" rel="noopener">
<img src="https://lh3.googleusercontent.com/proxy/9R1yfiOspfOVdrip4b4kF5i1cCaJWmdyKRJbtXw6bnmXiPqYRLZyUYYJL3MwiRWay8JjDNmdT8cpgxB7pBgWdLz04s6mjEYDE-DD5btDasFt7j-KPraA0YIFiF2rN2kSq9uq0PYNHc46NVmEokNuc1GbhujtP_NKyg72rnM" alt="Image of product" /></a>
<img src="https://lh3.googleusercontent.com/proxy/9R1yfiOspfOVdrip4b4kF5i1cCaJWmdyKRJbtXw6bnmXiPqYRLZyUYYJL3MwiRWay8JjDNmdT8cpgxB7pBgWdLz04s6mjEYDE-DD5btDasFt7j-KPraA0YIFiF2rN2kSq9uq0PYNHc46NVmEokNuc1GbhujtP_NKyg72rnM" alt="Discount-banner" />
</div>
我更喜欢将图像放在a-tag中，但是如果不能这样做，那也没问题(第一要务是让两个图像相互重叠)
回答 2
Stack Overflow用户
发布于 2021-08-06 14:38:38
将您的第二个图像放在一个div中，并应用与a标记相同的CSS，使它们都居中。
.image-wrapper {
height: 50%;
margin-top: 20px;
flex-grow: 1;
}
.image-wrapper a,
.image-wrapper div {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.image-wrapper img {
width: auto;
max-height: 100%;
}<div class="image-wrapper">
<a href="{{p.link}}" target="_blank" rel="noopener">
<img src="https://lh3.googleusercontent.com/proxy/9R1yfiOspfOVdrip4b4kF5i1cCaJWmdyKRJbtXw6bnmXiPqYRLZyUYYJL3MwiRWay8JjDNmdT8cpgxB7pBgWdLz04s6mjEYDE-DD5btDasFt7j-KPraA0YIFiF2rN2kSq9uq0PYNHc46NVmEokNuc1GbhujtP_NKyg72rnM" alt="Image of product" /></a>
<div>
<img src="https://lh3.googleusercontent.com/proxy/9R1yfiOspfOVdrip4b4kF5i1cCaJWmdyKRJbtXw6bnmXiPqYRLZyUYYJL3MwiRWay8JjDNmdT8cpgxB7pBgWdLz04s6mjEYDE-DD5btDasFt7j-KPraA0YIFiF2rN2kSq9uq0PYNHc46NVmEokNuc1GbhujtP_NKyg72rnM" alt="Discount-banner" />
</div>
</div>
Stack Overflow用户
发布于 2021-08-06 15:09:30
要将第二个图像覆盖在第一个图像上，可以使用position: absolute
.image-wrapper {
height: 50%;
margin-top: 20px;
flex-grow: 1;
}
.image-wrapper a {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.image-wrapper img {
width: auto;
max-height: 100%;
}
.image-wrapper .overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}<div class="image-wrapper">
<a href="{{p.link}}" target="_blank" rel="noopener">
<img src="http://placekitten.com/300/300" alt="Image of product" />
<img class="overlay" src="http://placekitten.com/100/100" alt="Discount-banner" />
</a>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68683329
复制相关文章
相似问题
腾讯云开发者
