如何在 ReactJS 中使用 CSS 设置背景图像后的 h1答案

【问题标题】：How to set h1 after background image using CSS in ReactJS如何在 ReactJS 中使用 CSS 设置背景图像后的 h1
【发布时间】：2020-10-11 15:16:52
【问题描述】：

让我解释一下我需要做什么。

我已经设置了如下的标题图片。

这是react 代码和相关的css

HeaderImage.jsx

import React, { Component } from "react";
import { Container, Col, Row } from "react-bootstrap";

class HeaderImage extends Component {
  render() {
    return (
      <div className="container-fluid">
        <div id="header-photo" className="header-text-wrapper">
          <div
            className="img-responsive header"
            src="../images/header2.jpg"
          ></div>
        </div>

        <div className="header-text">
          <div className="row">
            <div className="col-sm-12 col-12 col-md-12">
              <h2>Hi!, I am Sneha :)</h2>
            </div>
          </div>
        </div>
        <hr />
      </div>
    );
  }
}

export default HeaderImage;

这是custom.css 我用来设置此标题图像和顶部文本的样式


.header {
  position: fixed;
  top: 0;
  /* left: 0; */
  height: 100px;
  min-height: 600px;
  background: url("../images/flower.jpg") no-repeat top center;
  background-attachment: fixed;
  background-position: center top;
  background-size: cover;
  width: 100%;
  overflow: hidden;
  background-size: 100% auto;
}

.texts-on-header {
  color: white;
}


.header-text-wrapper {
  position: relative;
  top: 20% !important;
  margin-top: 10%;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

h2 {
  font-size: 3.4em;
  color: white;
  font-family: "Cherry Swash", cursive;
}

.header-text {
  position: absolute;
  top: 40%;
  left: 32.5%;
  transform: translateY(-50%);
}

稍后此HeaderImage.jsx 将在App.js 中调用，如下所示。

import React, { Fragment } from "react";
import logo from "./logo.svg";
import "./App.css";
import { Navbar, Nav, NavDropdown } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";
import "./assets/css/custom.css";

import NavigationBar from "./pages/NavBar";
import HeaderImage from './pages/HeaderImage'

function App() {
  return (
    <Fragment>
      {/* <NavigationBar /> */}
      
      <HeaderImage/>

      <h1>Welcome</h1> ----------------> this is not showing right below the HeaderImage, but behind the HeaderImage
      
    </Fragment>
  );
}

export default App;

现在我的问题是：当我尝试像上面那样添加一些其他内容时<h1>Welcome</h1> ot 没有显示在HeaderImage 的正下方。它总是在HeaderImage 后面添加。我怎么知道这个？我评论了HeaderImage 部分，如下所示：

【问题讨论】：

标签： html css reactjs twitter-bootstrap

【解决方案1】：

您的.header 位于fixed 等等更高的z-index（覆盖级别）。这就是为什么您的内容位于标题后面的原因。移除position: fixed;或创建一个高度等于Header的元素来推送内容。

【讨论】：