CSS网格-图像上方的文本框

Question

我正在使用CSS网格，目前正在尝试在图像上制作一个白框，其中必须包含一些文本。但是我真的不确定如何正确地做到这一点。这就是我希望布局看起来像的样子：

更大的屏幕：

移动设备：

我正在处理此特定行。但是我真的不知道如何开始这一部分。有谁知道如何做到这一点？

.sbp-item12 {
    grid-row: 6 / 7;
    grid-column: 1/13;
    height: 400px;
    background-image: url("https://i.ibb.co/fQvhtmj/234234.jpg");
}
@media only screen and (max-width: 600px) { 
    .sbp-item12 {
        grid-row: 9 / 10;
        grid-column: 1/13;
        height: 600px;
        background-image: url("https://i.ibb.co/fQvhtmj/234234.jpg");
    }

}

<div class="sbp-item12">item 12</div>

Answer 1

解决方案是添加一个单独的ID（或类）来定义该框。在这种情况下，我添加了#textbox，指定了位置，填充，背景和文本颜色（以突出显示的图像）。然后，我在您的<div id="textbox">中嵌套了一个<div class="sbp-item12">。这将适用于较大的屏幕。如果您想让#textbox在移动屏幕的图像下方滑动（因为我不知道这会如何影响网格的行和列），就需要弄弄它。

.sbp-item12 {
    grid-row: 6 / 7;
    grid-column: 1/13;
    height: 400px;
    background-image: url("https://i.ibb.co/fQvhtmj/234234.jpg");
    background-repeat: no-repeat;
}

#textbox {
  position: absolute;
  top: 130px;
  left: 50px;
  padding: 10px;
  background-color:#BFBFBF;
  color:#000;
}

@media only screen and (max-width: 600px) { 
    .sbp-item12 {
        grid-row: 9 / 10;
        grid-column: 1/13;
        height: 600px;
        background-image: url("https://i.ibb.co/fQvhtmj/234234.jpg");
        background-repeat: no-repeat;
    }

    #textbox {
        position: absolute;
        top: 130px;
        left: 50px;
        padding: 10px;
        background-color:#BFBFBF;
        color:#000;
}

}

<div class="sbp-item12">
  <div id="textbox">item 12 is just something to say to fill up some space for this example</div>
</div>

（还添加了background-repeat: no-repeat;以防止图像平铺。）