CSS垂直滚动字幕和梯度面膜

Question

我正在尝试在完整的流血背景上创建一个垂直滚动的字幕。滚动文本将包含在页面中心，必须在顶部和底部的梯度不透明度掩码后面。

我可以在顶部或底部施加梯度面膜，但不能同时使用。

有没有办法使用CSS/HTML？

请参阅带有不透明度掩码的小提琴，涂在容器的底部 - 目标是在容器的顶部和底部获取掩码。

  .bgimage{
  position: fixed;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  background-image: url(https://static.pexels.com/photos/880861/pexels-photo-880861.jpeg);
  z-index:-2;
  }
  .container {
  width: 100%;
  height: 10vw;
  margin: 1em auto;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
  text-align:center;
  -webkit-mask-image: -webkit-gradient(linear, left 20%, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
  
  }
  .marquee {
  top: 6em;
  position: relative;
  box-sizing: border-box;
  animation: marquee 20s linear infinite;
  }
  /* Make it move! */
  @keyframes marquee {
  0%   { top:   18vw }
  100% { top: -65vw }
  }
  /* Make it look pretty */
  .microsoft .marquee {
	margin: 0;
  padding: 0 1em;
  line-height: 1.5em;
  color: white;
  font: 5vw 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
  }

<div class="microsoft container">
    <p class="marquee">ONE<br /><br />TWO<br /><br />THREE<br /><br />FOUR<br /><br />FIVE<br /><br />SIX.</p>
</div>
<div class="bgimage">
</div>

Answer 1

只需更新下面的梯度：

.bgimage{
  position: fixed;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  background-image: url(https://static.pexels.com/photos/880861/pexels-photo-880861.jpeg);
  z-index:-2;
  }
  .container {
  width: 100%;
  height: 10vw;
  margin: 1em auto;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
  text-align:center;
  -webkit-mask-image:linear-gradient(transparent, rgba(0,0,0,1) 40% 60%,transparent);
          mask-image:linear-gradient(transparent, rgba(0,0,0,1) 40% 60%,transparent);
  
  }
  .marquee {
  top: 6em;
  position: relative;
  box-sizing: border-box;
  animation: marquee 20s linear infinite;
  }
  /* Make it move! */
  @keyframes marquee {
  0%   { top:   18vw }
  100% { top: -65vw }
  }
  /* Make it look pretty */
  .microsoft .marquee {
	margin: 0;
  padding: 0 1em;
  line-height: 1.5em;
  color: white;
  font: 5vw 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
  }

<div class="microsoft container">
  <p class="marquee">ONE<br><br>TWO<br><br>THREE<br><br>FOUR<br><br>FIVE<br><br>SIX.</p>
</div>
<div class="bgimage">
</div>