html - 如何在 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-index，这样你就可以在它上面叠加任何东西，比如你的文本。

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