html - 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; 以防止图像平铺。)