我的文字在部署的github页面上不显示了。

Question

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

部署的网站。https:/swordspeare09.github.ioreact_portfolio_site。

Github源码。https:/github.comSwordspeare09react_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:[email protected]?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中，你将 "text "类的不透明度设置为85%。

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

试着将其设置为0.85。