如何使用 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>
  );
}