如何在CSS网格单元格中的图像顶部显示图像(和图标)

Question

我正在尝试在每个网格单元格的图片顶部创建一个带有文本和图标的响应式网格。但是，我似乎无法将文本堆叠在图像顶部。

这是我当前的代码：

https://codepen.io/FrazierChristie/pen/WgdEEx

<div id="igGrid">
<div class="ig1"> 
<img class="igImage" src="https://cdn.shopify.com/s/files/1/1535/9821/products/3_1024x1024.jpg?v=1526628915" >
<div class="igText"> TEXT HERE  </div>
</div>
<div class="ig2"> 
<img class="igImage" src="https://cdn.shopify.com/s/files/1/1535/9821/products/grey9_1024x1024.jpg?v=1526628964" >
</div>
<div class="ig3"> 
<img class="igImage" src="https://cdn.shopify.com/s/files/1/1535/9821/products/12345_1024x1024.jpg?v=1526629035" >
</div>
<div class="ig4"> 
<img class="igImage" src="https://cdn.shopify.com/s/files/1/1535/9821/products/td1_1024x1024.jpg?v=1526628975" >
</div>
<div class="ig5"> 
<img class="igImage" src="https://cdn.shopify.com/s/files/1/1535/9821/products/grey6_1024x1024.jpg?v=1526629015" >
</div>
<div class="ig6"> 
<img class="igImage" src="https://cdn.shopify.com/s/files/1/1535/9821/products/BlueLS3_1024x1024.jpg?v=1535724601" > 
</div>
<div class="ig7"> 
<img class="igImage" src="https://cdn.shopify.com/s/files/1/1535/9821/products/Leaf1_1024x1024.jpg?v=1526629035" >
</div>
<div class="ig8"> 
<img class="igImage" src="https://cdn.shopify.com/s/files/1/1535/9821/products/grey8_1024x1024.jpg?v=1526628964" >
</div>

<div class="ig9"> 
<img class="igImage" src="https://cdn.shopify.com/s/files/1/1535/9821/products/td4_1024x1024.jpg?v=152662897" > 
</div>
<div class="ig10"> 
<img class="igImage" src="https://cdn.shopify.com/s/files/1/1535/9821/products/grey4_1024x1024.jpg?v=1526628964" >  
</div>
<div class="ig11">  
<img class="igImage" src="https://cdn.shopify.com/s/files/1/1535/9821/products/4a_1024x1024.jpg?v=1526628915">
</div>
</div>

和

#igGrid{
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: minmax(150px, auto);
grid-gap: 10px;
max-width: 960px;
margin: 0 auto;
text-align: center;
color: #fff;
}
#igGrid div{
background: #fff;
padding: 0px;
}
.ig1{
grid-column: 1/2;
}
.ig2{
grid-column: 2/3;
}
.ig3{
grid-column:3/5;
grid-row: 1/3;
}
.ig4{
grid-column: 1/3;
grid-row: 2/4;
}
.ig9{
grid-column: 3/5;
grid-row: 4/6;
}
.igImage{
width:100%;
height: 100%;
}
.igText{
position: absolute;
top:50%;
left: 50%;
tranfrom: translate(-50%,-50%);
}

谁能帮忙？

对不起我的格式，我对这一切真的很陌生，只是在玩。

谢谢！

Answer 1

在这里试试这个。与其在 html 中调用图像，不如在 css 上调用它。所有网格都已经格式化，您只需要为您创建的每个div 类输入 background：url((，例如......

HTML
<div class="ig1"> 
<h2> Text Here </h2>
</div>
CSS

.ig1 {

background:url('https://cdn.shopify.com/s/files/1/1535/9821/products/3_1024x1024.jpg? 
v=1526628915');
background-repeat: no-repeat;
background-size:contain;
}

这样，IMG就是背景。所以背景前面的任何内容都会出现。我希望这有帮助！

尝试将其添加到您的 CSS 中。

* {
box-sizing: border-box;
}

我只是想到了另一种方法。 你可以试试。. 通过键入此内容将 IMG 输入为其容器的 100%。并且还添加一个 z 索引，以便您可以在其上叠加任何内容，就像您的文本一样。

img {
width: 100%;
z-index -1;
}