如何使用 HTML 和 CSS 将 div 放在图像上？

Question

我还是一个编程初学者，我正在做一个项目来提高知识。我需要在图像顶部插入一个带有文本的 div，我正在尝试重新创建下图的示例：div 的一半是图像，另一半是文本。你能告诉我该怎么做吗？这是我放入codeandbox 的代码import React from "react";import "./styles.css";export default function App() {  return (    <div className="App">      <h1>Restaurant</h1>      <div        style={{          display: "flex",          flexDirection: "column",          justifyContent: "baseline",          alignItems: "baseline",          height: "200px",          width: "100%",          maxWidth: "300px"        }}      >        <div>          <img            style={{              width: "100%",              height: "100%"            }}            src="https://b.zmtcdn.com/data/collections/271e593eb19475efc39021c6e92603db_1454591396.jpg"            alt=""            className="img"          />        </div>        <div className="divText">          <span            style={{              color: "#fff",              backgroundColor: "#000"            }}          >            Lorem Ipsum! Lorem Ipsum! Lorem Ipsum!          </span>        </div>      </div>    </div>  );}

Answer 1

设置背景图像有两种解决方案：

使用 CSS 中的背景属性

.divText {

  background-image:url("https://b.zmtcdn.com/data/collections/271e593eb19475efc39021c6e92603db_1454591396.jpg");

}

使用定位来制作自定义布局

export default function App() {

  return (

    <div className="App">

      <h1>Restaurant</h1>

      <div

        style={{

          position: "relative",

          height: "200px",

          width: "300px"

        }}

      >

        <img

          style={{

            width: "100%",

            height: "100%"

          }}

          src="https://b.zmtcdn.com/data/collections/271e593eb19475efc39021c6e92603db_1454591396.jpg"

          alt=""

          className="img"

        />

        <div className="divText"

          style={{

            position: "absolute",

            bottom: 0,

            height: "50%",

            width: "100%",

            color: "#fff",

            backgroundColor: "#000",

            opacity: 0.7

          }}>

            Lorem Ipsum! Lorem Ipsum! Lorem Ipsum!

        </div>

      </div>

    </div>

  );

}

Answer 2

也许你可以做这样的事情？

""

.wrapper {

  width: 400px;

  height: 200px;

  position: relative;

}

picture {

  position: absolute;

  z-index: -1;

}

picture img {

  object-fit: cover;

  top: 0;

}

.text-overlay {

  top: 50%;

  height: 50%;

  position: relative;

  background-color: white;

  display: flex;

  z-index: 2;

  padding: 10px;

  opacity: 0.8;

  

  font-family: sans-serif;

}

<div class="wrapper">

 <picture>

  <img src="https://images.unsplash.com/photo-1601758064224-c3c5ec910095?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2047&q=80"

  width="400px"

  height="200px"

  style=" "/>

 </picture>

 

 <div class="text-overlay">

  <p>Hello</p>

 </div>

</div>

Answer 3

我的这个解决方案：

样式.css：

.divText {

  position: absolute;

  height: 50%;

  background-color: white;

  bottom: 0;

}

应用程序.js：

import React from "react";

import "./styles.css";

export default function App() {

  return (

    <div className="App">

      <h1>Restaurant</h1>

      <div

        style={{

          display: "flex",

          flexDirection: "column",

          justifyContent: "baseline",

          alignItems: "baseline",

          height: "200px",

          width: "100%",

          maxWidth: "300px",

          position: "relative"

        }}

      >

        <div

        style={{

          height: "inherit"

        }}>

          <img

            style={{

              width: "100%",

              height: "100%"

            }}

            src="https://b.zmtcdn.com/data/collections/271e593eb19475efc39021c6e92603db_1454591396.jpg"

            alt=""

            className="img"

          />

        </div>

        <div className="divText">

          <span

            style={{

              color: "#fff",

              backgroundColor: "#000"

            }}

          >

            Lorem Ipsum! Lorem Ipsum! Lorem Ipsum!

          </span>

        </div>

      </div>

    </div>

  );

}