如何使用 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 {&nbsp; background-image:url("https://b.zmtcdn.com/data/collections/271e593eb19475efc39021c6e92603db_1454591396.jpg");}使用定位来制作自定义布局export default function App() {&nbsp; return (&nbsp; &nbsp; <div className="App">&nbsp; &nbsp; &nbsp; <h1>Restaurant</h1>&nbsp; &nbsp; &nbsp; <div&nbsp; &nbsp; &nbsp; &nbsp; style={{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: "relative",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: "200px",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: "300px"&nbsp; &nbsp; &nbsp; &nbsp; }}&nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; <img&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; style={{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: "100%",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: "100%"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; src="https://b.zmtcdn.com/data/collections/271e593eb19475efc39021c6e92603db_1454591396.jpg"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alt=""&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; className="img"&nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; <div className="divText"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; style={{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: "absolute",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; bottom: 0,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: "50%",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: "100%",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color: "#fff",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; backgroundColor: "#000",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; opacity: 0.7&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Lorem Ipsum! Lorem Ipsum! Lorem Ipsum!&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; );}

Answer 2

也许你可以做这样的事情？"".wrapper {&nbsp; width: 400px;&nbsp; height: 200px;&nbsp; position: relative;}picture {&nbsp; position: absolute;&nbsp; z-index: -1;}picture img {&nbsp; object-fit: cover;&nbsp; top: 0;}.text-overlay {&nbsp; top: 50%;&nbsp; height: 50%;&nbsp; position: relative;&nbsp; background-color: white;&nbsp; display: flex;&nbsp; z-index: 2;&nbsp; padding: 10px;&nbsp; opacity: 0.8;&nbsp;&nbsp;&nbsp; font-family: sans-serif;}<div class="wrapper">&nbsp;<picture>&nbsp; <img src="https://images.unsplash.com/photo-1601758064224-c3c5ec910095?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2047&q=80"&nbsp; width="400px"&nbsp; height="200px"&nbsp; style=" "/>&nbsp;</picture>&nbsp;&nbsp;<div class="text-overlay">&nbsp; <p>Hello</p>&nbsp;</div></div>

Answer 3

我的这个解决方案：样式.css：.divText {&nbsp; position: absolute;&nbsp; height: 50%;&nbsp; background-color: white;&nbsp; bottom: 0;}应用程序.js：import React from "react";import "./styles.css";export default function App() {&nbsp; return (&nbsp; &nbsp; <div className="App">&nbsp; &nbsp; &nbsp; <h1>Restaurant</h1>&nbsp; &nbsp; &nbsp; <div&nbsp; &nbsp; &nbsp; &nbsp; style={{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: "flex",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; flexDirection: "column",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; justifyContent: "baseline",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alignItems: "baseline",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: "200px",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: "100%",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; maxWidth: "300px",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: "relative"&nbsp; &nbsp; &nbsp; &nbsp; }}&nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; <div&nbsp; &nbsp; &nbsp; &nbsp; style={{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: "inherit"&nbsp; &nbsp; &nbsp; &nbsp; }}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; style={{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: "100%",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: "100%"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; src="https://b.zmtcdn.com/data/collections/271e593eb19475efc39021c6e92603db_1454591396.jpg"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alt=""&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; className="img"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div className="divText">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; style={{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color: "#fff",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; backgroundColor: "#000"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Lorem Ipsum! Lorem Ipsum! Lorem Ipsum!&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; );}