CSS 不透明渐变从上到下没有颜色？

Question

我想让我的 div 具有渐变不透明度。我能找到的是如何用颜色设置它。但是如果我不想有任何颜色怎么办，这样里面的元素就会向底部透明:

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(41,137,216,1)), color-stop(100%,rgba(125,185,232,0))); /* Chrome,Safari4+ */

Answer 1

这就是掩码的目的

.box {
  font-size: 35px;
  display: inline-block;
  -webkit-mask: linear-gradient(#000, #0000);
          mask: linear-gradient(#000, #0000);
}

<div class="box">
  text<br>text<br>text<br>text<br>text<br>text<br>
</div>
<div class="box" style="color:red;">
  text<br>text<br>text<br>text<br>text<br>text<br>
</div>
<div class="box" style="color:green;">
  text<br>text<br>text<br>text<br>text<br>text<br>
</div>