Question

我正在帮助学生完成一个项目，我们正在学习一个教程。教程如下： https://ihatetomatoes.net/demos/parallax-scroll-effect/

这是我们的index.html：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  <html lang="en">
  <head>
   <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>joeys school project</title>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/normalize.css">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script>
    <script src="js/jquery.waypoints.min.js"></script>
  </head>
  <body>
    <main>
      <section id="slide-1" class="homeSlide">
        <div class="bcg" data-center="background-position: 50% 0px;" data-top-bottom="background-position: 50% -100px;" data-anchor-target="#slide-1">
          <div class="hsContainer">
            <div class="hsContent" data-center="opacity: 1" data-106-top="opacity: 0" data-anchor-target="#slide-1 h2">
              <h2>Mac Vs. Windows</h2>
              <p>Which is better? Which should you choose?</p>
            </div>
          </div>
        </div>
      </section>
    </main>
  </body>
</html>

这是我们的main.css：

    body {
      margin: 0;
    }
    .mac_header {
      z-index: 100;
      position: absolute;
      color: white;
      font-size: 24px;
      font-weight: bold;
      left: 150px;
      top: 350px;
    }
    /* CSS */
    .hsContainer {
        display: table;
        table-layout: fixed;
        width: 100%;
        height: 100%;
        overflow: hidden;
        position: relative;
        opacity: 0;
    }
    .hsContent {
        max-width: 450px;
        margin: -150px auto 0 auto;
        display: table-cell;
        vertical-align: middle;
        color: #ebebeb;
        padding: 0 8%;
        text-align: center;
    }
     .hsContent h2,
     .copy h2 {
       color: #ffffff;
       font-size: 45px;
       line-height: 48px;
       margin-bottom: 12px;
     }
     .hsContent p {
       width: 400px;
       margin: 0 auto;
       color: #b2b2b2;
     }
     .hsContent a {
       color: #b2b2b2;
       text-decoration: underline;
     }

    .bcg {
        background-position: center center;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: cover;
        height: 100%;
        width: 100%;
    }
    /* Slide 1 */
    #slide-1 .bcg {
     background-image:url('../img/computers-1227142.jpg');
     height: 733px;}

问题是，当我们在Chrome中检查页面时，我们可以看到文本块，但它没有在图像上显示文本。我们只看到它所在的div的轮廓。我们已经研究了如何使这个工作，并正确地遵循教程。我们还将代码与教程进行了比较，无法确定断开连接的位置。有任何想法吗？在这一点上，一个解决方案可以正常工作，而不是教程中的解决方案。

在背景图象问题的文本

0 个答案: