html - 2 个带有背景渐变的堆叠 div，显示不正确

Question

我有一个问题，我想将 div 作为背景。他们基本上包裹了整个页面。两者都具有与其背景图像相同的渐变设置。问题是在 div 上显示渐变非常好，但另一个只是白色。

html:

<div class="bg bg-base">
  <div id="bg-animation" class="bg bg-animation">
    <div class="layer-content">
       <!--content here-->
    </div>
  </div>
</div>

CSS:

.bg {
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  position: absolute;
}

.bg-base {
  background-image: linear-gradient(to left bottom, #5533ff, #008dff, #00bdff, #00e0dd, #a4fbc9);
}

.bg-animation {
  background-image: linear-gradient(to right top, #5533ff, #008dff, #00bdff, #00e0dd, #a4fbc9);
}

.layer-content {
  width: 100%;
  position: relative;
}

我正在使用顶部渐变制作一些不透明度动画，这就是为什么我需要将其中的 2 个叠加在一起。但如果说，我将顶部渐变的不透明度设置为 0，则底部不存在。如果我将 height: 5000px; 添加到 bg-base，它就会显示出来。

Answer 1

干掉绝对定位:

https://jsfiddle.net/cathead/1nbjdp05/4/

.bg {
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: cover;
  xposition: absolute;
  width: 100%;
}