[英]My text is not displaying on deployed github pages site
I have been working on a React version of my online portfolio and I have run into some problems.我一直在研究我的在线作品集的 React 版本,但遇到了一些问题。 After deploying my portfolio to GitHub pages, I've noticed that I can no longer see any of the text on my landing and contact pages.将我的投资组合部署到 GitHub 页面后,我注意到我无法再在我的登录和联系页面上看到任何文本。 The links in the home and contact component pages are still there but are not visible.主页和联系人组件页面中的链接仍然存在,但不可见。 I assumed that they were hidden underneath the background image of the pages, but after removing the background image from on of the pages, the text still remains hidden.我假设它们隐藏在页面的背景图像下方,但是从页面中删除背景图像后,文本仍然隐藏。 I have provided links to my deployed portfolio and code for both pages.我已经为这两个页面提供了指向我部署的投资组合和代码的链接。 Any thoughts?有什么想法吗?
Deployed Site: https://swordspeare09.github.io/react_portfolio_site部署站点: https://swordspeare09.github.io/react_portfolio_site
Github Source Code: https://github.com/Swordspeare09/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;
In your CSS you set the opacity of the "text" class to 85%.在您的 CSS 中,您将“文本”class 的不透明度设置为 85%。
.text, .text2 {
text-align: center;
background-color: #4db6ac;
opacity: 85%;
margin-top: 3px;
margin-right: 25px;
margin-left: 25px;
}
Try to set it to 0.85.尝试将其设置为 0.85。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.