CSS 视差效果高度为 50%答案

【问题标题】：CSS Parallax effect height to 50%CSS 视差效果高度为 50%
【发布时间】：2018-05-18 22:26:57
【问题描述】：

我目前正在使用一个视差效果，它占据了首页的整个背景。我的问题是我想将高度设置为 50%.. 但那不起作用。

代码：

<header class="parallax-window" data-parallax="scroll" data-image-src="img/picture.jpg" alt="test">

.parallax-window {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 50%; //Not working.. why? 
}


  <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/parallax.js/1.4.2/parallax.min.js'></script>
  <script >// SMOOTH SCROLLING
  $(function() {
    $('a[href*="#"]:not([href="#"])').click(function() {
      if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
        if (target.length) {
          $('html, body').animate({
            scrollTop: target.offset().top
          }, 900);
          return false;
        }
      }
    });
  });
  $('.parallax-window').parallax({imageSrc: 'img/picture.jpg'});
  </script>

【问题讨论】：

标签： html css height parallax parallax.js

【解决方案1】：

首先：您启动了两次视差！ data-parallax="scroll" 属性触发自动初始化，您可以通过在 javascript 中调用 $('.parallax-window').parallax({imageSrc: 'img/picture.jpg'}); 来重复该初始化。也无需提供两次图像源！您可以使用属性data-image-src 或javascript 选项imageSrc。一个实际上覆盖了另一个，所以它没有害处，但它是不必要的。

此外，相对（或百分比）高度仅适用于父元素。如果父元素没有高度或相对高度，则在子元素中设置此属性将不起作用。这是与 CSS 相关的。您可以尝试将父元素设置为 100%（例如 body { height: 100%; } 或绝对高度 (body { height: 1200px; })，或与查看高度相关的高度 (body { height: 200vh; })。但我不建议这样做，因为您必须保证您的内容符合定义的大小。

我宁愿使用类似的东西：

.parallax-window {
    min-height: 50vh;
}

还要确保在放置其他代码之前关闭 <header> 元素。否则这段代码会放在视差前面。

【讨论】：