我正在努力实现这一目标
图片 1 和 3 会稍微隐藏在图片 2 后面。
我有这个html
<div class="imageBanner">
<div class="imageLeft">
<img src="https://unsplash.it/600/400/">
</div>
<div class="imageCentre">
<img src="https://unsplash.it/600/400/">
</div>
<div class="imageRight">
<img src="https://unsplash.it/600/400/">
</div>
</div>
设置简单,单个包含 div,三个子 div 每个包含一个图像(相同的原始大小)。
当前的 CSS
.imageBanner {
display: flex;
align-items: center;
width:100%;
max-width: 1024px;}
.imageLeft img{
max-width: 60%;
}
.imageCentre {
z-index: 9999;
position: relative;
}
.imageCentre img{
width: 100%;
}
.imageRight img{
max-width: 60%;
}
所以我所做的是使用 flex 沿 x 轴对齐图像。然后我给中心图像一个绝对位置,以便将 z-index 考虑在内。然而,这是我遇到问题的地方,图像的布局不像上面的例子。
如果有帮助,请举个例子
.imageBanner {
display: flex;
align-items: center;
width:100%;
max-width: 1024px;
}
.imageLeft img{
max-width: 60%;
}
.imageCentre {
z-index: 9999;
position: relative;
}
.imageCentre img{
width: 100%;
}
.imageRight img{
max-width: 60%;
}
<div class="imageBanner">
<div class="imageLeft">
<img src="https://unsplash.it/600/400/">
</div>
<div class="imageCentre">
<img src="https://unsplash.it/600/400/">
</div>
<div class="imageRight">
<img src="https://unsplash.it/600/400/">
</div>
</div>
我觉得我可能很接近并且会继续尝试,但任何帮助都会很棒!
谢谢 汤姆
最佳答案
你有没有想过这样的事情:
.imageBanner {
display: block;
position: relative;
margin: 0 auto;
width:100%;
max-width: 1024px;
}
.imageLeft {
width: 40%;
display: block;
position: absolute;
left: 0;
top: 30px;
z-index: -1;
}
.imageCentre {
width: 60%;
display: block;
position: relative;
z-index: 1;
margin: 0 auto;
}
.imageRight {
width: 40%;
display: block;
position: absolute;
right: 0;
top: 30px;
z-index: -1;
}
img {
width: 100%;
}
<div class="imageBanner">
<div class="imageLeft">
<img src="https://unsplash.it/600/400/">
</div>
<div class="imageCentre">
<img src="https://unsplash.it/600/400/">
</div>
<div class="imageRight">
<img src="https://unsplash.it/600/400/">
</div>
</div>
左图的左缩进可以通过改变left:
属性来设置,右图的右缩进可以改变right:
关于html - 3 图像布局 - 中心图像更大和更高的 z-index,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41048201/