文章/答案/技术大牛

发布

社区首页 >问答首页 >如何给这个Parallax网站添加内容？

问如何给这个Parallax网站添加内容？
EN

Stack Overflow用户

提问于 2021-03-16 20:10:08

回答 1查看 47关注 0票数 0

我从Codepen下载了一个fire watch视差模板，并一直试图在其上添加内容。视差效果很好，我需要的是在空白处的视差之后添加内容(文本、图像等)。

我已经尝试过更改CSS代码和添加带有字体、颜色属性的文本标记，等等。没有一样东西起作用。

* {
  box-sizing: border-box;
}

html,
body {
  
}

.content {
  right: 0;
  bottom: 0;
  margin-top: 300px;
  color: black;
}

.parallax {
  background-color: #FEDCC8;
  perspective: 100px;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  position: absolute;
  top: 0;
  left: 50%;
  right: 0;
  bottom: 0;
  margin-left: -1500px;
}

.parallax__layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.parallax__layer img {
  display: block;
  position: absolute;
  bottom: 0;
}

.parallax__cover {
  background: #2D112B;
  color: black;
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 2000px;
  z-index: 2;
}

.parallax__content {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
}

.h1 {
  color: #00ff00;
}

.parallax__layer__0 {
  transform: translateZ(-300px) scale(4);
}

.parallax__layer__1 {
  transform: translateZ(-250px) scale(3.5);
}

.parallax__layer__2 {
  transform: translateZ(-200px) scale(3);
}

.parallax__layer__3 {
  transform: translateZ(-150px) scale(2.5);
}

.parallax__layer__4 {
  transform: translateZ(-100px) scale(2);
}

.parallax__layer__5 {
  transform: translateZ(-50px) scale(1.5);
}

.parallax__layer__6 {
  transform: translateZ(0px) scale(1);
}

<!DOCTYPE html>
<html lang="en" >
<head>
    
  <meta charset="UTF-8">
  <title>CodePen - Firewatch Parallax in CSS</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./style.css">

</head>
<body>

<!-- partial:index.partial.html -->
<div class="parallax">
    <div class="parallax__layer parallax__layer__0">
        <img src="https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_0.png?raw=true" />
    </div>
    <div class="parallax__layer parallax__layer__1">
        <img src="https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_1.png?raw=true" />
    </div>
    <div class="parallax__layer parallax__layer__2">
        <img src="https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_2.png?raw=true" />
    </div>
    <div class="parallax__layer parallax__layer__3">
        <img src="https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_3.png?raw=true" />
    </div>
    <div class="parallax__layer parallax__layer__4">
        <img src="https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_4.png?raw=true" />
    </div>

    <div class="parallax__layer parallax__layer__5">
        <img src="https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_5.png?raw=true" />
    </div>
    <div class="parallax__layer parallax__layer__6">
        <img src="https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_6.png?raw=true" />
    </div>

    <div class="parallax__cover">
        <
    </div>

    
</div>




<!-- partial -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

以上是该项目的完整代码。所有图像都是在线托管的。

我希望在紫色背景上添加视差图像后的内容。但是，我添加的任何内容都会在背景之后出现，否则就永远不会出现。

html

css

parallax

回答 1

Stack Overflow用户

发布于 2021-03-16 21:00:07

在css中添加图像为background-img，在html中添加文本，如下所示

<div class="parallax">
   <div class="parallax__layer parallax__layer__1">
      <span class="text0>text0</span>
   </div>


   <div class="parallax__layer parallax__layer__2">
      <span class="text>text1</span>
   </div>
</div>

css中的背景图像：

.parallax__layer parallax__layer__1{
     background-image: url("layer1image.jpg");
  }

  .parallax__layer parallax__layer__2{
     background-image: url("layer2image.jpg");
  }

要完全理解，请查看下面提到的链接的页面源代码

链接：https://www.w3schools.com/howto/tryhow_css_parallax_demo.htm

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/66654959

复制

相似问题

问如何给这个Parallax网站添加内容？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何给这个Parallax网站添加内容？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何给这个Parallax网站添加内容？
EN