Fatal编程技术网
  • css/
  • Css 如何修复导致页面底部空白的视差图像？

Css 如何修复导致页面底部空白的视差图像？

css

Css 如何修复导致页面底部空白的视差图像？,css,parallax,Css,Parallax,我正在为自己制作一个网站作为练习。我试图在下面设置一个视差横幅，然后是内容，但出于某种原因，我需要将内部内容的最小高度设置为至少与横幅本身相同的大小，否则您可以滚动到内部内容的末尾，然后看到应该隐藏的视差图像。谁能告诉我为什么会发生这种情况，以及我如何解决它？我试着检查页面，底部的空间似乎只是背景，没有任何视差层。背景是固定的，设置为100%，所以我不确定为什么会导致这种行为 HTML: 你能将图像的绝对URL放入CSS中吗？然后你/我/我们可以使用snippet工具将其转化为一个工作示例。在h

我正在为自己制作一个网站作为练习。我试图在下面设置一个视差横幅，然后是内容，但出于某种原因，我需要将内部内容的最小高度设置为至少与横幅本身相同的大小，否则您可以滚动到内部内容的末尾，然后看到应该隐藏的视差图像。谁能告诉我为什么会发生这种情况，以及我如何解决它？我试着检查页面，底部的空间似乎只是背景，没有任何视差层。背景是固定的，设置为100%，所以我不确定为什么会导致这种行为

HTML:

你能将图像的绝对URL放入CSS中吗？然后你/我/我们可以使用
snippet
工具将其转化为一个工作示例。在html和正文上都显示Cheers Margin 0。让我知道这是否有帮助，如果有，它将是一个副本，我将向您推荐适当的Q/a。您可以将图像的绝对URL放入CSS中，然后您/我/我们可以使用
snippet
工具将其转化为一个工作示例。在html和正文上都显示Cheers Margin 0。让我知道这是否有帮助，如果有，它将是一个副本，我会让你适当的Q/a。 
<body>

<div id="scrollContainer" class="parallax">
    <div class="parallax__group">
        <div class="parallax__layer parallax__layer--0">

        </div>
        <div class="parallax__layer parallax__layer--1">

        </div>
        <div class="parallax__layer parallax__layer--2">

        </div>
        <div class="parallax__layer parallax__layer--3">

        </div>
        <div class="parallax__layer parallax__layer--banner">

        </div>
        <div class="parallax__layer parallax__layer--4">

        </div>
        <div class="parallax__layer parallax__layer--5">

        </div>
        <div class="parallax__layer parallax__layer--6">

        </div>
        <div id="parBody" class="parallaxBody">
            <div id="circleContainer" class="container topSec">
                <div id="smallCircle" class="smCircle1"></div>
                <div class="smCircle2"></div>
                <div class="circle"></div>
            </div>
        </div>
    </div>
</div>

    html{
  height: 100%;
}

body {
    font: 50% / 1.5 Arial;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color: black;
    height: 100%;
}

/*parallax styles for 1000px width
Do something different for less than 1000px width*/

  .parallax__group {
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.5s;
  }

  .parallaxBody{
    position: absolute;
    background: rgb(25, 25, 75);
    background-size: 1300px auto;
    top: 1800px;
    width: 100%;
    min-height: 1000px;
    background-size: 100% 100%;
  }

.parallax {
    background-image: url("../images/layer1.png");
    background-position-x: center;
    background-position-y: 0;
    background-size: 1300px 1300px;
    perspective: 1px;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    font-size: 200%;

    
  }
 .parallax__layer {
    position: absolute;
    top: 0;
    right: 0;
    left: -12px;
    background-size: 1300px 1300px;
    background-repeat: no-repeat;
  }

  .parallax__layer--6 {
    top:-100px;
    height: 3200px; /*adjust for screen sizes*/
    background-size: 1300px 3200px;
    background-image: url("../images/layer7.png");
  }
  .parallax__layer--5 {
    top:-200px;
    height: 2000px;
    background-size: 1300px 1500px;
    transform: translateZ(-0.5px) scale(1.5);
    background-image: url("../images/layer6.png");
  }
  .parallax__layer--4 {
    top:-200px;
    height: 1200px;
    transform: translateZ(-1.5px) scale(2.5);
    background-image: url("../images/layer5.png");
    background-size: 1300px 1300px;
  }
  .parallax__layer--3 {
    top: -200px;
    height: 1200px;
    transform: translateZ(-2px) scale(3);
    background-size: 1300px 1300px;
    background-image: url("../images/layer4.png");
  }
  .parallax__layer--banner {
    height: 300px;
    background-size: 50vw 15vw;
    left: 32%;
    top: 400px;
    -webkit-transform: translate(-32%, -70%);
    transform: translate(-32%, -70%);
    background-repeat: no-repeat;
    transform: translateZ(-1px) scale(2);
    background-image: url("../images/banner.png");
  }
  
  .parallax__layer--2 {
    top: -500px;
    height: 1200px;
    transform: translateZ(-4px) scale(5);
    background-size: 1300px 1300px;
    background-image: url("../images/layer3.png");
  }
  .parallax__layer--1 {
    top: -400px;
    height: 1000px;
    transform: translateZ(-5px) scale(6); /*Try moving z-index up and scaling down*/
    background-image: url("../images/layer2.png");
    background-size: 1300px 1300px;
  }
  
  
  @media screen and (min-width: 1300px){
    .parallax__layer--6 {
      top:-200px;
      height: 3400px;
      background-size: 1600px 4200px;
    }
    .parallax__layer--5 {
      top:-500px;
      height: 2200px;
      background-size: 1600px 2000px;
    }
    .parallax__layer--4 {
      top:-200px;
      height: 1500px;
      background-size: 1600px 1600px;
    }
    .parallax__layer--3 {
      top: -200px;
      height: 1500px;
      background-size: 1600px 1600px;
    }
    .parallax__layer--banner {
      height: 300px;
      background-size: 50vw 15vw;
      top: 0;
    }
    
    .parallax__layer--2 {
      top: -700px;
      background-size: 1600px 1600px;
    }
    .parallax__layer--1 {
      top: -1200px;
      height: 1200px;
      background-size: 1600px 1600px;
    }
  }

  @media screen and (min-width: 1600px){
    .parallax__layer--6 {
      top:-200px;
      height: 2000px;
      background-size: 2000px 5000px;
    }
    .parallax__layer--5 {
      top:-700px;
      height: 3000px;
      background-size: 2000px 2500px;
    }
    .parallax__layer--4 {
      top:-400px;
      height: 1800px;
      background-size: 2000px 2000px;
    }
    .parallax__layer--3 {
      top: -700px;
      height: 1500px;
      background-size: 2000px 2000px;
    }
    .parallax__layer--banner {
      height: 300px;
      background-size: 50vw 15vw;
      top: 0;
      left: 12vw;
    }
    
    .parallax__layer--2 {
      top: -1000px;
      background-size: 2000px 2000px;
      height: 1300px;
    }
    .parallax__layer--1 {
      top: -1000px;
      height: 1300px;
      background-size: 2000px 2000px;
    }
  }

  @media screen and (min-width: 2000px){
    .parallax__layer--6 {
      top:-800px;
      height: 5000px;
      background-size: 2600px 6500px;
    }
    .parallax__layer--5 {
      top:-1300px;
      height: 4000px;
      background-size: 2600px 3250px;
    }
    .parallax__layer--4 {
      top:-1100px;
      height: 2200px;
      background-size: 2600px 2600px;
    }
    .parallax__layer--3 {
      top: -1100px;
      height: 2400px;
      background-size: 2600px 2600px;
    }
    .parallax__layer--banner {
      height: 500px;
      background-size: 35vw 10vw;
      top: 0;
    }
    
    .parallax__layer--2 {
      top: -2500px;
      background-size: 2600px 2600px;
      height: 1800px;
    }
    .parallax__layer--1 {
      top: -2000px;
      height: 1500px;
      background-size: 2600px 2600px;
    }
  }
  
 
* {
  margin: 0;
  padding: 0;
}