想要将img背景设为弹性框并覆盖三个黑色文本框，中间有空格

Question

我正在尝试创建三个文本框，其中白色文本和黑色背景位于背景图像之上，所有文本框均使用显示柔性内联。

我之前可以在带有图像的 html/css 代码中使用 Flex 来完成此操作，但现在这些框出现在另一个框的下方。

请帮忙！非常感谢！

<!--locations-->
    <section>
        <div class="locations">
            <div><img class="img-locations-background" src="C:\Users\vkuzma\OneDrive - Compass Energy Systems Ltd\Desktop\VS Sheet\Tea Cozy\Photos\img-locations-background.jpg"></div>
                    <div id="box-1">
                        <h3>Downtown</h3>
                        <p>384 West 4th St</p>
                        <p>Suite 108</p>
                        <p>Portland, Maine</p>
                    </div>
                    <div id="box-2">
                        <h3>East Bayside</h3>
                        <p>3433 Phisherman's Avenue</p>
                        <p>(Northwest Corner)</p>
                        <p>Portland, Maine</p>
                    </div>
                    <div id="box-3">
                        <h3>Oakdale</h3>
                        <p>3433 Phisherman's Avenue</p>
                        <p>Second Floor</p>
                        <p>Portland, Maine</p>
                    </div>
            <div>
                <h1 class="loca">Locations</h1>
            </div>
        </div>
    </section>
</body>

/* locations */

.locations {
    position: relative;
    max-height: 500px;
}

.img-locations-background {
    width: 100%;
    height: 500px;
    background-repeat: no-repeat;
    opacity: 0.9;
    object-fit: cover;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.loca {
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: Helvetica;
    color: seashell;
    background-color: rgb(0, 0, 0, 0);
    width: 99%;
    text-align: center;
}

#box-1 {
    color: seashell;
    text-align: center;
    font-family: helvetica;
    background-color: black;
    height: 200px;
    width: 33.33%;
    display: flex;
    }

#box-2 {
    color: seashell;
    text-align: center;
    font-family: helvetica;
    background-color: black;
    height: 200px;
    width: 33.33%;
    display: flex;
  }

#box-3 {
    color: seashell;
    text-align: center;
    font-family: helvetica;
    background-color: black;
    height: 200px;
    width: 33.33%;
    display: flex;
}

Answer 1

我可以通过放置 z 轴来做到这一点。同样在下一课中我学习了网格。你也可以在 CSS 中而不是 HTML 中做background-img。

Answer 2

首先， display: flex 属性不应应用于单个元素，而应应用于要定位的元素的父元素。因此，将盒子包裹在类似这样的包装纸中 box-wrapper:

        <div class="box-wrapper">
          <div id="box-1">
            <h3>Downtown</h3>
            <p>384 West 4th St</p>
            <p>Suite 108</p>
            <p>Portland, Maine</p>
          </div>
          <div id="box-2">
            <h3>East Bayside</h3>
            <p>3433 Phisherman's Avenue</p>
            <p>(Northwest Corner)</p>
            <p>Portland, Maine</p>
          </div>
          <div id="box-3">
            <h3>Oakdale</h3>
            <p>3433 Phisherman's Avenue</p>
            <p>Second Floor</p>
            <p>Portland, Maine</p>
          </div>
        </div>

接下来在此包装器上应用CSS。

.box-wrapper {
  display: flex;
  gap: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

使用 position:absolute 根据屏幕定位框。另外，您应该使用 background-image 属性通过 css 放置背景图像。