Question

我正在尝试创建视差背景作为站点的分隔符。背景图像似乎只占据了原本应有的一半大小，周围都有奇怪的白色边框。我似乎无法在代码中找到任何可能导致此问题的原因，无论我做什么，无论是边框还是内部div上的滚动条。我只需要背景图片适合div的空间，即可在该部分中制作滚动视差。

我尝试了溢出：隐藏播放各种高度/宽度组合，包括calc（100vh * 2）来放大图像。它似乎唯一要做的就是更改显示容器中的图像（几乎像一个子容器，但上面没有子容器）。我还玩过transform，transform-origin，perspective，scale和其他我在google和此处可以找到的东西。


html, body {
    height: 100%!important;
    margin: 0px;
    padding: 0px;
}

input, select, textarea {
    box-shadow: inset 0 2px 4px hsla(0, 0%, 0%, 0.13);
}

.ico {
    width: 50px!important;
    height: 50px!important;
}

nav {
    position: fixed!important;
    z-index: 999;
    width: 100vw;
}

.content_head {
    background-color: aqua;
}

.content_about {
    background-color: blueviolet;
}

.content_spacer {
    opacity: 0;
    height: 50vh;
}

.back_spacer {
    opacity: 0;
}

.back1 {
    background-image: url("images/IMG_1164.JPG");
    background-clip: border-box;
    background-size: cover;
    height: 100%!important;
    width: 100%!important;
    min-height: 100%!important;
    min-width: 100%!important;
}

.back-group {
    max-height: 75vh!important;
}

.container-fluid {
    padding: 0!important;

}

/* Parallax Styles Credit to: https://keithclark.co.uk/articles/pure-css-parallax-websites */

.parallax {
    perspective: 1px;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
}

.parallax__layer {
    position: absolute;
    transform-origin-x: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.parallax__layer--base {
    transform: translateZ(0);
    height: 100vh;
}

.parallax__layer--back {
      position: absolute;
      width: 30%!important;
      height: 50vh!important;
      top: 0;
      right: 0;
      bottom: 0;
      left: auto;
      margin: 0;
      transform: translateZ(-1px);
      -webkit-transform-origin-y: 100% 100% 0px;
      -moz-transform-origin: 100% 100% 0px;
      -ms-transform-origin: 100% 100% 0px;
      transform-origin: 100% 100% 0px;
}

.parallax__group {
    position: relative;
    height: 100vh;
    transform-style: preserve-3d;
    overflow: auto!important;
}


    <div class="parallax">
        <div class="parallax__group">
            <div class="parallax__layer--base content_head">
                <h1 class="text-center my-auto">Content base</h1>
            </div>
        </div>
        <div class="parallax__group back-group">
            <div class="parallax__layer--back back1"></div>
            <div class="parallax__layer--base content_spacer"></div>
        </div>
        <div class="parallax__group">
            <div class="parallax__layer--base content_about">
                <h1 class="text-center my-auto">Content base 2</h1>
            </div>
        </div>
        <div class="parallax__group">
            <div class="parallax__layer--back back">
            <div class="parallax__layer--base content_spacer"></div>
                <img src="images/IMG_1170.JPG" height="4096" width="3072" class="img-fluid"/>
            </div>
        </div>
    </div>

严格来说，我认为它实际上不是边框，而是背景图像比整个DIV元素小。

Answer 1

body,
html {
  margin: 0;
  padding: 0;
}

.wrapper {
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  perspective: 2px;
}

.section {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-shadow: 0 0 5px #000;
}

.parallax::after {
  /* Display and position the pseudo-element */
  content: " ";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateZ(-1px) scale(1.5);
  background-size: 100%;
  z-index: -1;
}

.static {
  background: red;
}

.bg1::after {
  background-image: url('https://images.unsplash.com/photo-1567170578400-9d182981f2a1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80');
}

.bg2::after {
  background-image: url('https://images.unsplash.com/photo-1567170566770-eea3bb0b16ed?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80');
}

<main class="wrapper">
  <section class="section static">
    <h1>Static</h1>
  </section>
  <section class="section parallax bg1">
    <h1>Parallax</h1>
  </section>
  <section class="section static">
    <h1>Static</h1>
  </section>
  <section class="section parallax bg2">
    <h1>Parallax</h1>
  </section>
  <section class="section static">
    <h1>Static</h1>
  </section>
</main>

视差背景图像适合div

1 个答案: