向图像添加叠加背景未正确响应

Question

目前，我正在尝试在我的图像上叠加一层，使其更暗并在上面添加文字。我为我的图像和叠加层使用了绝对定位，但由于某种原因，叠加层占据了我 window 的整个 space 并位于我的文本上方。我希望它看起来像这样：

代码沙箱：https://codesandbox.io/s/amazing-mendeleev-gohz7?file=/src/App.tsx

代码：

<div className="container" style={{ padding: "30px" }}>
        <img style={{ borderRadius: "10px" }} src="dubai.png"></img>
        <div
          style={{
            background: "rgba(0, 0, 0, 0.5)",
            width: "100%",
            height: "100%",
            zIndex: 1,
            position: "absolute",
            top: "50%",
            left: "50%",
            transform: "translate(-50%, -50%)"
          }}
        ></div>
        <div
          style={{
            color: "#fff",
            position: "absolute",
            top: "20%",
            left: "50%",
            transform: "translate(-50%, -100%)",
            fontFamily: "Roboto",
            width: "100%"
          }}
        >
          <div style={{ fontSize: "35px", textAlign: "center", zIndex: 200 }}>
            DUBAI UAE
          </div>
        </div>
      </div>

Answer 1

您需要相对于 parent.

定位叠加层

然后，您的 parent 已设置 padding:10px。这意味着图像将更小（不会覆盖整个 div ）20px 宽度和 20px 高度。但是叠加层会覆盖整个div。正如您在评论中所说，从那里您会看到“图像周围的边框”。实际上，它只是空的 space，由 parent div 上的 10px 填充构成。

因此，您必须缩小叠加层以不超过图像。为此，您应该对叠加层的宽度和高度都使用 calc(100% - 20px) 。

文本的定位和 zIndex 也必须更改。看这里https://codesandbox.io/s/interesting-tree-p4vwp?file=/src/App.tsx

下面的代码

import "./styles.css";
import Head from "next/head";

export default function App() {
  return (
    <>
      <div
        className="container"
        style={{ padding: "10px", position: "relative" }}
      >
        <img
          style={{ borderRadius: "10px", width: "100%", height: "auto" }}
          src="dubai.png"
        />
        <div
          style={{
            background: "rgba(0, 0, 0, 0.5)",
            width: "calc(100% - 20px)",
            height: "calc(100% - 20px)",
            zIndex: 1,
            position: "absolute",
            top: "50%",
            left: "50%",
            transform: "translate(-50%, -50%)",
            borderRadius: "10px"
          }}
        ></div>
        <div
          style={{
            color: "#fff",
            position: "absolute",
            top: "50%",
            left: "50%",
            transform: "translate(-50%, -50%)",
            fontFamily: "Roboto",
            width: "100%",
            zIndex: 2
          }}
        >
          <div style={{ fontSize: "35px", textAlign: "center", zIndex: 200     }}>
            DUBAI UAE
          </div>
        </div>
      </div>
    </>
  );
}

向图像添加叠加背景未正确响应

Adding an overlay background to image not responding properly

html

css

overlay

background-image