带有渐变蒙版的CSS垂直滚动字幕

Question

我试图在完整的出血背景上创建一个垂直滚动的选框.滚动文本将包含在页面的中心,并且必须在顶部和底部的渐变不透明蒙版后面传递.

我可以在顶部或底部应用渐变蒙版,但不能同时应用两者.

有没有办法只用CSS/HTML做到这一点？

请参阅应用于容器底部的不透明蒙版 - 目标是在容器的顶部和底部获取该蒙版.

https://jsfiddle.net/appxe0g8/37/

HTML

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

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(to top, rgba(0,0,0,0), rgba(0,0,0,1) 40%,rgba(0,0,0,1) 60%,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>