Question

我是一名刚开始学习Web开发的学生，今年开始学习，并且一直对进入CSS等方面的“有趣”事物感兴趣。

我偶然看到了这段视频：https://www.youtube.com/watch?v=o8DTzU0Iol8

当遵循代码时，我的图像根本不会加载。 Jscript动画有效，文本/边框在那里，但图像根本不会加载。

我尝试了多种插入图像的“方式”，但没有任何希望通过的方式。

我还与一些合格的Web开发人员进行了交流，这些朋友正在该领域积极工作，甚至他们都找不到问题所在。

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  /*background: #000;*/
}

.container {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.container .column {
  width: 25%;
  height: 100%;
  float: left;
  border-right: 2px solid rgba(0,0,0,.5);
  box-sizing: border-box;
  z-index: 1;
}

.container .column:last-child {
  border-right: none;
}

.container .column .content {
  position: relative;
  height: 100%;
}

.container .column .content h1 {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  background: rgba(0,0,0,.1);
  text-align: center;
  margin: 0;
  padding: 0;
  color: rgba(255,255,255,.2);
  font-size: 15em;
  border-top: 2px solid rgba(0,0,0,.5);
  border-bottom: 2px solid rgba(0,0,0,.5);
}

.container .column .content .box {
  position: absolute;
  top: 50%;
  transform: translateY(100%);
  box-sizing: border-box;
  padding: 40px;
  background: rgba(255,255,255,1);
  text-align: center;
  transition: 0.5s;
  opacity: 0;
}

.container .column.active .content .box {
  opacity: 1;
  transform: translateY(-50%);
}

.container .column .content .box h2 {
  margin: 0;
  padding: 0;
  font-size: 30px;
  color: #262626;
}

.container .column .content .box p {
  color: #262626;
  font-size: 18px;
}

.container .column bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
}

.container .column.active .bg.bg1 {
  background: url(bg1.jpg);
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  transition: 0.5s;
}

.container .column.active .bg.bg2 {
  background: url(bg2.jpg);
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  transition: 0.5s;
}

.container .column.active .bg.bg3 {
  background: url(bg3.jpg);
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  transition: 0.5s;
}

.container .column.active .bg.bg4 {
  background: url(bg4.jpg);
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  transition: 0.5s;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <title>Vegete the Saiyan Prince</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div class="container">
      <div class="column active">
        <div class="content">
          <h1>1</h1>
          <div class="box">
            <h2>What is lorem ipsum</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          </div>
        </div>
        <div class="bg bg1"></div>
      </div>
      <div class="column">
        <div class="content">
          <h1>2</h1>
          <div class="box">
            <h2>What is lorem ipsum</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          </div>
        </div>
        <div class="bg bg2"></div>
      </div>
      <div class="column">
        <div class="content">
          <h1>3</h1>
          <div class="box">
            <h2>What is lorem ipsum</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          </div>
        </div>
        <div class="bg bg3"></div>
      </div>
      <div class="column">
        <div class="content">
          <h1>4</h1>
          <div class="box">
            <h2>What is lorem ipsum</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          </div>
        </div>
        <div class="bg bg4"></div>
      </div>
    </div>
    
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script type="text/javascript">
      $(document).on('mouseover', '.container .column', function(){
        $(this).addClass('active').siblings().removeClass('active')
      });

      </script>

  </body>
</html>

  </script>

我会上传图片，但是无论如何它们都是代码的一些背景。对于任何格式错误等，我深感抱歉。（我还是有些新鲜。）

预先感谢您<3！

英雄节效果特刊

0 个答案: