CSS 网格中的重叠图像
Phi*_*ipp 1 html css grid overlap css-grid
我需要两张图片在 CSS 网格布局中重叠而不作弊，并且必须使用 CSS 网格来完成。意味着它应该留在布局单元中。这是我正在做的事情：
“中间”应该在图片中居中，并且都在页面上居中，分别是“横幅”单元格
以下 CSS 布局应该保持不变：
.container {
display: grid;
grid-template-columns: 15% 70% 15%;
grid-template-rows: 20% 20% 20% 20% 20%;
grid-gap: 2px;
grid-template-areas:
'banner banner banner'
'sidebar content fb'
'sidebar content fb'
'sidebar content fb'
'src src src';
}
.banner {
grid-area: banner;
}
我已经尝试过这些方法：
justify-items: center;
justify-content: center;
align-content: center;
align-self: center;
text-align: center;
使用绝对位置的方法效果很好，但它完全忽略了网格，因此实际网格位于图片下方。可以对“横幅”单元格应用填充以向下推内容，但这是我想要避免的那种作弊。
我需要这 2 张图片在这个“横幅”单元格中保持重叠，但是由于 CSS 网格很新，我的选项用完了，而且没有很多答案。
HTML：
<body class="body">
<div class="container">
<div class="banner">
<img id="skyline" src="Pictures/SkylinePH.jpg">
<img id="logo" src="Pictures/Logo2.png">
</div>
</div>
我非常感谢任何帮助！先感谢您 ：）
图片上的文字。使用 CSS 网格布局。
HTML
<div id="container">
<img src="some-image.jpg">
<p>SOME TEXT OVER IMAGE</p>
</div>
CSS
#container{
display: grid;
grid-template-columns: 1fr;
grid-template-rows: repeat(3, 1fr);
}
#container img{
grid-column: 1;
grid-row: 1 / span 3;
width: 100%;
height: 100%;
overflow: hidden;
}
#container p{
grid-column: 1;
grid-row: 2;
align-self: center;
justify-self: center;
z-index: 1;
}
图像覆盖图像。使用 CSS 网格布局。
HTML
<div id="container">
<img id="img-1" src="image-1.jpg">
<img id="img-2" src="image-2.jpg">
</div>
CSS
#container{
display: grid;
grid-template-columns: 1fr;
grid-template-rows: repeat(3, 1fr);
}
#container #img-1{
grid-column: 1;
grid-row: 1 / span 3;
width: 100%;
height: 100%;
overflow: hidden;
}
#container #img-2{
grid-column: 1;
grid-row: 2;
align-self: center;
justify-self: center;
z-index: 1;
}
| 归档时间： |
|
| 查看次数： |
6036 次 |
| 最近记录： |