Question

我需要在CSS网格布局中重叠两张图片而不作弊，而且必须使用CSS网格完成。意味着它应该留在布局单元格中。以下是我正在做的工作：＆＃34;中间＆＃34;应该在图片中居中，并且都集中在页面上，分别是＆＃34; banner＆＃34; -cell

以下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;

绝对位置的方法很好，但它完全忽略了网格，因此实际的网格在图片下面。可以在＆＃34; banner＆＃34;中应用填充。细胞推下内容，但这是我想避免的那种作弊行为。

我需要这两张照片在这个＆＃34; banner＆＃34;中保持重叠。单元格，但由于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>

我非常感谢任何帮助！提前谢谢你：）

Answer 1

绝对位置的方法很好，但它完全忽略了网格，因此实际的网格在图片下面。

您不需要position: absolute两个图像 - 您可以拥有较大且位于徽标后面的横幅图像，占据CSS网格单元格中通常会占用的空间。然后你可以绝对定位并将徽标置于其顶部。那会有用吗？

编辑：尝试完成此操作的一些CSS：

.banner {
  position: relative; /* so we can position the logo based on this container */
  text-align: center; /* so the skyline image is horizontally centered */ 
}

#logo {
  position: absolute; /* these 4 lines will center the logo */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Answer 2

文字覆盖图片。使用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;
}

Answer 3

使用css grid，不再需要绝对或相对定位。不要忘记在css grid中，您可以通过给出相同的grid-row和grid-column值来叠加网格，然后使用z-index。相当强大:)希望这有帮助

在CSS网格中重叠图像

3 个答案: