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

【问题标题】：CSS Opacity Gradient Top to Bottom Without Color?CSS不透明度渐变从上到下没有颜色？
【发布时间】：2026-01-10 15:45:01
【问题描述】：

我想让我的 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+ */

【问题讨论】：

标签： css opacity linear-gradients

【解决方案1】：

这就是mask的目的

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

<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>

【讨论】：

【解决方案2】：

您可以在 ::after 伪元素上创建一个渐变，从透明渐变为白色（或您想要使用的任何背景颜色）并将其覆盖在 div 中的内容上：

.g{
    width: 50vw;
    height: 50vh;
    position: relative;
    display:flex;
    align-items: flex-end;
}

.g::after{
    content: "";
    width: 100%;
    height: 100%;
    position:absolute;
    background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
}

<div class="g">
    Lorem Ipsum<br>
    Lorem Ipsum<br>
    Lorem Ipsum<br>
    Lorem Ipsum<br>
    Lorem Ipsum<br>
    Lorem Ipsum<br>
    Lorem Ipsum<br>
    Lorem Ipsum<br>
    Lorem Ipsum<br>
    Lorem Ipsum
</div>

【讨论】：