CSS网格中的重叠图像

我需要两张图片在CSS网格布局中重叠而不会发生作弊，并且必须使用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;

绝对位置的方法制定了罚款，但它忽略了电网完全所以实际电网下的图片。可以在“横幅”单元格上应用填充来压下内容，但这是我想避免的那种欺骗行为。

我需要这两张图片在这个“横幅”单元格中保持重叠，但由于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>

我的任何帮助，非常感谢！预先感谢您:)

来源

2017-08-18 Philipp

这些Flexbox的方法应该在电网工作，以及。 https：//开头计算器。com/q/35871294/3597276 –

绝对位置的方法工作得很好，但它完全忽略网格，所以实际的网格是在图片之下。

你不需要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%); 
}

来源

2017-08-18 17:42:34

感谢您的快速回复不幸的不是。如果我这样做，标志会出现在横幅的右侧。不知怎的，横幅也应该集中在页面 – Philipp

你能告诉我们，在代码片段中，我们可以解决实施问题吗？ –

当然，编辑我的帖子 – Philipp

文本在图片。与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; 
}

来源

2017-10-12 13:53:31 Ted

CSS网格中的重叠图像

回答

相关问题