使用背景视频淡化半透明和可滚动 div 的顶部和底部边缘

Question

所以我有一个包含固定高度的 div，在其中还有另一个带有 overflow: auto 的 div 可以滚动。父 div 是半透明的，并且在所有内容的背景中都有正在播放的视频。

HTML：

<div class="parent">

  <div class="fade-top"/>

  <div class="fade-bottom"/>

  <div class="text">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! 
    Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure 
    laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem 
    ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, 
    aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam.
  </div>

</div>

CSS：

.parent{
  height: 2rem;
  position: relative
  background: hsla(180, 2%, 8%, 0.76);
}

.fade-top {
  poistion: absolute;
  top: 0;
  background: linear-gradient(0deg, hsla(180, 2%, 8%, 0.76) 20%, transparent 100%);
  height: 50px;
  transition: opacity 0.3s;
}

.fade-bottom {
  position: absolute;
  bottom: 0;
  background: linear-gradient(180deg, $content-bg-elementum 20%, transparent 100%);
  height: 50px;
  transition: opacity 0.3s;
}

.text {
  overflow: auto;
}

问题：

如何让顶部和底部的 div 逐渐淡出以与父级半透明颜色混合？

当前状态，红板要与父背景混合，不能被父高度切割：

Answer 1

您可以使用 After 和 before 淡化顶部和底部，而不是使用额外的 div。 代码会是这样的。

HTML

 <div class="parent">
 <div class="text">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! 
    Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure 
    laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem 
    ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, 
    aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! 
    Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure 
    laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem 
    ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, 
    aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! 
    Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure 
    laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem 
    ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, 
    aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam.
  </div>
</div>

CSS

.parent{

 position: relative;
width: 600px;
  background: hsla(180, 2%, 8%, 0.76);
  color: white;
}
.parent:before{
content: "";
  width:100%;
  height:40px;
  background: linear-gradient(black, transparent);
  position:absolute;
  top: 0;
}
.parent::after{
content: "";
  width:100%;
  height:40px;
  background: linear-gradient(transparent, black);
  position:absolute;
  bottom: 0;
}
.text {
  overflow-y: auto;
  height: 200px;
}

https://codepen.io/suffiyan1/pen/vYeyjZo

Answer 2

所以我终于找到了使用 CSS 属性 mask 的方法。像这样：

HTML：

<div class="parent fade-top-bottom">

  <div class="text">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! 
    Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure 
    laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem 
    ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, 
    aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam.
  </div>

</div>

CSS：

.parent{
  height: 2rem;
  position: relative
  background: hsla(180, 2%, 8%, 0.76);
}

.fade-top-bottom {
    mask:
    linear-gradient(to top,  transparent 10%, black 80%, transparent 100%),
    linear-gradient(to bottom, transparent 10%, black 80%, transparent 100%);
  }

.text {
  overflow: auto;
}