Question

我目前正在使用 CRA 开发单页应用程序。我正在尝试创建一个位于应用程序顶部并包含叠加层的英雄图像。对于英雄图像，我使用了背景图像。我遇到的问题是保持背景图像的整体响应能力。无论屏幕大小如何，我都希望用户能够看到整个背景图像。

以下链接显示了我试图达到的效果：https://www.youtube.com/watch?v=gfzWLbAbcCw&feature=youtu.be

我的JSX代码如下：

import React from "react";
import "./styles.scss";

export default function App() {
  return (
    <>
      <div className="container">
        <div className="container-background"> </div>
        <div className="content">
          <div style={{ textAlign: "center", paddingTop: 20 }}>Welcome</div>
        </div>
      </div>
    </>
  );
}

我的CSS代码如下：

body {
  margin: 0;
  padding: 0;
}

.container {
  position: relative;
}
.container .container-background {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url('https://i.imgur.com/iyFtMNA.jpg');
  opacity: .2;
  height: 1200px;
}
.container .content {
  position: relative;
  z-index: 1;
}

我在使用哪些 css 属性来实现我想要的效果方面遇到了很多困难。欢迎提出任何建议！

以下链接https://codesandbox.io/s/vigilant-wozniak-t8wmx?file=/src/styles.scss:0-391 包含一个用于调试的沙箱

Answer 1

+1 用于代码框和框我会这样实现

反应

   <div className="container">
      <div className="hero">
        <img src="https://i.imgur.com/iyFtMNA.jpg" alt="bg" />
        <div className="overlay">
          <h1 className="title">Title</h1>
          <h2 className="subtitle">Subtitle</h2>
        </div>
      </div>
      <div className="content">
        <div style={{ textAlign: "center", paddingTop: 20 }}>Welcome</div>
      </div>
    </div>

css

* { margin: 0; padding: 0; }
.hero {
  position: relative;
}
.hero img {
  width: 100%;
  opacity: .2;
}
.hero .overlay {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
}
.container .content {
  position: relative;
}

bg-overlay-example

Answer 2

为此，您需要为响应式版本设置不同的图像，或者您可以使用 background-size: 100% auto; 查看整个图像，但您需要降低该 div 的高度

无论屏幕大小如何，都保持背景图像响应能力

2 个答案: