在 React.js 中，我正在尝试在图像顶部的叠加层上添加文本和其他一些项目

Question

在reactjs项目中，我在图像顶部成功添加了一个覆盖层以创建一些不透明。

但是，我现在很难在这两个项目的顶部添加文本。我希望文本在覆盖层的顶部，以白色为中心和白色，最重要的是，叠加层的不透明功能不会影响。

这是我到目前为止所拥有的：

在CSS文件中：

.container {
    position: relative;
    background: #2F5596;
    z-index: auto;
  }
.container::before {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.80);
  content: '';
}
.image {
    display: block;
    justify-content: center;
    object-fit: cover;
    align-items: center;
    margin: auto;
    z-index: 0;
}
.text {
    display: block;
    justify-content: center;
    object-fit: cover;
    align-items: center;
    margin: auto;
    z-index: 2;
}

在react.js文件中：

import logo from '../../assets/images/WhiteLettering_BlueBackground/WhiteLettering_BlueBackground_256.png';
import classes from './Layout.css';
const layout = (props) => {
    return (
        <div className={classes.container}>
            <img src={logo} className={classes.image}/>
            <div style={{ textAlign: "center", color: "white"}} >
                <h1>Dynasty Football</h1>
                <h1>A Complete Draft Tool Kit</h1>
                <FontAwesomeIcon icon={faArrowDown} />
            </div>
        </div>
    )
}
export default layout;

出现文本和箭头，但它们是由覆盖的不透明性影响的。

任何帮助将不胜感激。

谢谢，

Answer 1

为什么在

中设置background: rgba(0, 0, 0, 0.80);

.container::before {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.80);
  content: '';
}

？如果您只在container类中使用RGBA值并摆脱:before中的背景属性，它不会影响您的文本颜色，例如：

.container {
  position: relative;
  background: rgba(47, 85, 150, .8);
  z-index: auto;
}

如果应该像：另一种不更改背景属性的方式是将position: relative;添加到文本包装器的CSS属性：

<div
  style={{
    textAlign: "center",
    color: "white",
    position: "relative".
  }}
>
  <h1>Dynasty Football</h1>
  <h1>A Complete Draft Tool Kit</h1>
  <FontAwesomeIcon icon={faArrowDown} />
</div>

如何用垂直＆amp;在容器顶部的水平对齐如前所述，很难摆脱为什么您(CSS(如此复杂以实现所需的目标(例如，为什么需要container::before定义(。但是，为了实现所需的目标，您可以将图像作为新创建的背景.container_image的背景图像，并使用Flex Box设置内容属性，以实现.container中正确的内容对齐。这就是外观：

.container {
  position: relative;
  background: #2f5596;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container_image {
  background-image: url("logo-url");
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 100%;
}
.container::before {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  content: "";
}
.content {
  color: white;
  position: relative;
}

<div className="container">
  <div className="container_image">
    <div className="content">
      <h1>Dynasty Football</h1>
      <h1>A Complete Draft Tool Kit</h1>
    </div>
  </div>
</div>