我的文本未显示在已部署的 github 页面站点上

Question

我一直在研究我的在线作品集的 React 版本，但遇到了一些问题。将我的投资组合部署到 GitHub 页面后，我注意到我无法再在登录和联系页面上看到任何文本。主页和联系人组件页面中的链接仍然存在，但不可见。我假设它们隐藏在页面的背景图像下方，但是从页面中删除背景图像后，文本仍然隐藏。我已经为这两个页面提供了指向我部署的投资组合和代码的链接。有什么想法吗？

部署站点： https://swordspeare09.github.io/react_portfolio_site

Github 源代码： https://github.com/Swordspeare09/react_portfolio_site

import React from "react";
import Pic from "../../images/HeadSnipePic.jpg";
import LinkedInIcon from "@material-ui/icons/LinkedIn";
import GitHubIcon from "@material-ui/icons/GitHub";
import { teal } from "@material-ui/core/colors";
import Background from "../../images/CityPic.jpg";

import "../../CSS/Styles.css";


function Home() {
  return (
    <div>
      <div className="text">
        <h1>Full Stack Web Developer</h1>
      </div>

      <img className="headSnipe" src={Pic} alt="avatar" />

      <div className="text">
        <p>
          HTML/CSS | JavaScript | C++ | Java | ReactJS | NodeJS | Express |
          MongoDB | mySQL | Bootstrap | Materialize | Bulma
        </p>
        <p>
          US Air Force veteran turned Full Stack Web Developer hoping to use
          experience and logic acquired over the years to help create
          technologies and applications that will change the world.
        </p>
      </div>
      <div className="Social-Links">
        <a
          href="https://www.linkedin.com/in/franciscojcortez2009/"
          target="_blank"
          rel="noreferrer noopener"
        >
          <LinkedInIcon style={{ fontSize: 80, color: teal[300] }} />
        </a>
        <a
          href="https://github.com/Swordspeare09"
          target="_blank"
          rel="noreferrer noopener"
        >
          <GitHubIcon style={{ fontSize: 80, color: teal[300] }} />
        </a>
      </div>
    </div>
  );
}

export default Home;

import React from "react";
import LinkedInIcon from "@material-ui/icons/LinkedIn";
import MailOutlineIcon from "@material-ui/icons/MailOutline";
import GitHubIcon from "@material-ui/icons/GitHub";
import { teal} from "@material-ui/core/colors";
import Background from "../../images/CityPic.jpg";

function Contact() {
  return (
    <div
      style={{
        height: "100vh",
        width: "100%",
        margin: "auto",
        backgroundImage: `url(${Background})`,
        backgroundSize: `cover`,
        backgroundRepeat: "no-repeat",
        zIndex: "-1"
      }}
    >
      <h1 className="text2">Connect With Me</h1>
      <div className="Social-Links2">
        <a
          href="https://www.linkedin.com/in/franciscojcortez2009/"
          target="_blank"
          rel="noreferrer noopener"
        >
          <LinkedInIcon style={{ fontSize: 100, color: teal[300] }} />
        </a>
      </div>

      <div className="Social-Links2">
        <a
          href="mailto:cortez.francisco.j.2009@gmail.com?subject:subject text"
          target="_blank"
          rel="noreferrer noopener"
        >
          <MailOutlineIcon style={{ fontSize: 100, color: teal[300] }} />
        </a>
      </div>

      <div className="Social-Links2">
        <a
          href="https://github.com/Swordspeare09"
          target="_blank"
          rel="noreferrer noopener"
        >
          <GitHubIcon style={{ fontSize: 100, color: teal[300] }} />
        </a>
      </div>
    </div>
  );
}

export default Contact;

Answer 1

在您的 CSS 中，您将“文本”类的不透明度设置为 85%。

.text, .text2 {
    text-align: center;
    background-color: #4db6ac;
    opacity: 85%;
    margin-top: 3px;
    margin-right: 25px;
    margin-left: 25px;
}

尝试将其设置为 0.85。