个人中心
gpt4 book ai didi

css - 背景图像未出现在 github 页面上

转载 作者：行者123 更新时间：2023-11-27 23:05:30 27 4
gpt4 key购买 nike

我的背景图像没有出现在 github 页面上。我尝试了所有方法，但仍然无法正常工作。

背景图片:url("images/img1.jpg");这是我的原始代码，我试过这样做:背景图片:url("../images/img1.jpg");和背景图片:url("/images/img1.jpg");但两者都不起作用。我的 css 和 js 完全正常工作。所以我真的想不通为什么它不起作用。 https://github.com/jxvicinema/physical-chemistry这是 repo 谢谢

最佳答案 

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: 0;
          box-sizing: 0;
}

body {
  font-family: "Slabo 27px", serif;
  background: #f8f8f8;
}

.bold {
  font-weight: 700px;
}

.sm {
  font-size: 1.5rem;
}

.red {
  color: #ae0001;
}

.yellow {
  color: #eeba30;
}

.banner-container {
  text-align: center;
  color: #fff;
  height: 100vh;
  position: relative;
  background: rgba(0, 0, 0, 0.6);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.banner-container h1 {
  font-size: 4.5rem;
  margin-bottom: 0.8rem;
}

.banner-container p {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.banner-container i {
  padding: 0.5rem;
  color: #fff;
  background: rgba(0, 0, 0, 0.9);
  border-radius: 50%;
}

.banner-container i:hover {
  background: #42d98f;
  color: #000;
}

.banner-container:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-image: url("../images/img1.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: -1;
}

.question-container,
.answer-container {
  padding: 1rem;
  max-width: 1100px;
  margin: auto;
  text-align: center;
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.question-container p,
.answer-container p {
  font-size: 2.2rem;
  letter-spacing: 2px;
  line-height: 1.5;
  margin-bottom: 2rem;
}

.question-container i,
.answer-container i {
  padding: 0.5rem;
  color: #fff;
  background: rgba(0, 0, 0, 0.9);
  border-radius: 50%;
}

.question-container i:hover,
.answer-container i:hover {
  background: #42d98f;
  color: #000;
}

.end-banner {
  height: 25vh;
  background-color: rgba(27, 90, 60, 0.9);
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.end-banner h3 {
  font-size: 3.5rem;
  letter-spacing: 5px;
  margin: 1rem;
}

@media (max-width: 500px) {
  .answer-container p {
    font-size: 1.8rem;
  }
}
/*# sourceMappingURL=style.css.map */
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Jerns</title>
    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
    <script
      src="https://kit.fontawesome.com/c7414cb6d4.js"
      crossorigin="anonymous"
    ></script>
    <link
      href="https://fonts.googleapis.com/css?family=Slabo+27px&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="styles/style.css" />
  </head>
  <body>
    <header>
      <div class="banner-container">
        <h1>Physical Chemistry</h1>
        <p>Nicole Hernaez</p>
        <a href="#sc1" ><i class="fas fa-chevron-down fa-2x"></i></a>
      </div>
    </header>

    <section>
      <div class="question-container" id="sc1">
        <p data-aos="fade-left">
          <span>Q.67</span> Is it always possible to normalize a wavefunction by
          multiplying it by an appropriate constant?
        </p>
        <a href="#sc2"><i class="fas fa-chevron-down fa-2x"></i></a>
      </div>
    </section>

    <section>
      <div class="answer-container" id="sc2">
        <p data0aos="fade-right">Normalization Condition:<p>
        <p data-aos="fade-right">
          To normalize a wavefunction, it should be multiplied by an appropriate
          constant (other than zero) such that the sum of probability to find
          the particle over entire space is 1:
        </p>
        <a href="#sc3"><i class="fas fa-chevron-down fa-2x"></i></a>
      </div>
    </section>

    <section>
      <div class="answer-container " id="sc3">
        <p data-aos="fade-left" >(1) &#8747; <sup>&#8734;</sup>-&#8734; | &#936; (x) |&#178; dx = 1, <span class="sm"> where | &#936;(x)|&#178; = ( &#936;*(x)) ( &#936;(x))</span>  </p>
        <p data-aos="fade-left">multiplying an Appropriate Constant (A) to &#936;(x) such that</p>
        <p data-aos="fade-left"> &#8747; 1	&#936;(x)|&#178;dx = &#8747; |A &#936;(x)|&#178; dx = A&#178;&#8747;1&#936(x)|&#178; dx = 1</A></p>
        <a href="#sc4"><i class="fas fa-chevron-down fa-2x"></i></a>
      </div>
    </section>

    <section>
      <div class="answer-container" id="sc4">
        <p data-aos="faded-right">To find the normalization constant (A)</p>
        <p data-aos="faded-right">A&#178; &#8747; 1 &#936;(x)|&#178; dx = 1 | </p>
        <p data-aos="faded-right">A&#178; B = 1</p>
        <p data-aos="faded-right">A&#178; = <sup>1</sup> &frasl;<sub>B</sub> </p>
        <p data-aos="faded-right">A = <sup>1</sup>&frasl;<sub>&#8730;B</sub></p>
        <p data-aos="faded-right">So, assuming that the integral &#8747;1 &#936;(x)|&#178; dx = B can be calculated,</p>
        <p data-aos="faded-right">&#936;(x) is normalized if it is multiplied by <sup>1</sup>&frasl;<sub>&#8730;B</sub></p>
        <a href="#sc5"><i class="fas fa-chevron-down fa-2x"></i></a>
      </div>            
    </section>

    <section>
      <div class="answer-container" id="sc5">
        <p data-aos="faded-left"> <span class="yellow"> However it is not always possible to normalize a wavefunction by multiplying it by an appropriate constant.</span></p>
        <p data-aos="faded-left">For instance, <span class="red"> a plane wave function</span></p>
        <p data-aos="faded-left">&#936;(x,t) = >&#936; e <sup>i(kx-wt)</sup></p>
        <a href="#sc6"><i class="fas fa-chevron-down fa-2x"></i></a>
      </div>
    </section>

    <section>
      <div class="answer-container" id="sc6">
        <p data-aos="faded-right">The integral of its square over all space yields <span class="yellow"> infinity</span>. In quantum mechanics, normalization of a wavefunction requires the integral to <span class="yellow"> be equal to 1.</span> <span class="red"> There is no any complex number that can be used to multiply infinity to make it equal to one.</span></p>
        <a href="#sc7"><i class="fas fa-chevron-down fa-2x"></i></a>
      </div>
    </section>

    <section>
      <div class="answer-container" id="sc7">
        <p data-aos="faded-left">Thus a wavefunction can only be normalized if the wavefunction is <span class="yellow">single-valued</span>, <span class="yellow"> square-integrable</span>, and <span class="yellow"> continuous</span>.</p>
        <p data-aos="faded-left">In example, the integral &#8747; 1 &#936;(x) | &#178;dx = B can be calculated. </p>
      </div>
    </section>

    <section>
      <div class="end-banner">
        <h3>Chemistry 373</h3>
        <i class="fas fa-flask fa-4x"></i>
      </div>
    </section>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
    <script src="app.js"></script>
    <script>
      AOS.init({
        offset: 150,
        duration: 1000});
    </script>
  </body>
</html>

注意:我已经编辑了您的 style.css。您需要这样做:background-image: url("../images/img1.jpg");

不确定为什么这对您不起作用 - 当我下载了您的 GitHub 解决方案并修改了您的 style.css 它立即起作用了!

我建议你做什么:

  1. 将您的 CSS 修改为以下代码
  2. 按 Ctrl+F5 强制刷新以确保没有奇怪的缓存问题!

.banner-container:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-image: url("../images/img1.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: -1;
}

关于css - 背景图像未出现在 github 页面上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58759695/

27 4 0
文章推荐： c# - 获取 HTML 文本字段并在 C# (cshtml) 中用作变量
文章推荐： c++ - “生物”未在此范围内声明
文章推荐： javascript - 是否可以将元素恢复到其先前的位置而不将位置作为参数传递？
文章推荐： javascript - 在 javascript 中的 Object.prototype 上添加自定义方法的副作用
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com