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;
}

如何在CSS Grid单元格中的图像顶部显示图像（和图标）。

1 个答案: