使用CSS 3实现渐变透明度淡出效果

Question

我想知道是否可能使用纯CSS来复制“热门推文”列表底部的效果？

http://www.twitter.com

- Rana

Answer 1

可以的！通过利用RGBa颜色和CSS3渐变，我们可以将以下样式应用于元素，并具有淡入淡出半透明背景：

Mozilla:

background: -moz-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255, 1));

Webkit：

background: -webkit-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255, 1));

(在Webkit渐变发生变化后更新)

遗憾的是，这仅适用于Firefox 3.6+、Safari和Chrome。如果您需要在IE或旧版Firefox中实现此效果，则最好像Twitter一样使用半透明PNG。

- derekerdmann

---

你可以通过 filter（IE7及更早版本）和 -ms-filter（IE 8＆9）在旧版IE中使其工作。请参见https://dev59.com/wHVC5IYBdhLWcg3wsTRi和https://dev59.com/NFTTa4cB1Zd3GeqPvsx4。 - Paul D. Waite

只有在此对象背景为白色或静态时，此方法才有效。想象一下，在该元素后面是一个渐变或图像。 - JLF

Answer 2

在我的情况下，我认为线性渐变很丑，所以我创建了一个“缓和”渐变。与其他答案混合搭配以获得您想要的结果。

.your-class {
    --scale: 1;
    mask-image: linear-gradient(90deg,
      rgba(255,255,255,0.0) calc(var(--scale) * 0%),
      rgba(255,255,255,0.1) calc(var(--scale) * 6%),
      rgba(255,255,255,0.5) calc(var(--scale) * 22.5%),
      rgba(255,255,255,0.6) calc(var(--scale) * 25.5%),
      rgba(255,255,255,0.7) calc(var(--scale) * 30%),
      rgba(255,255,255,0.8) calc(var(--scale) * 36%),
      rgba(255,255,255,0.9) calc(var(--scale) * 48%),
      rgba(255,255,255,1.0) calc(var(--scale) * 60%),
    );
}

- Caveman

Answer 3

尽管这不是一个全面的解决方案，但它适用于Safari / Webkit - 所以对于从事移动应用程序的人来说，这是一个好消息。

因此，假设您只涉及webkit，那么您可以使用在这里描述的不错的功能。

-webkit-mask-image: -webkit-gradient(...)

这也有助于你在无法使用某些叠加元素来模拟淡出效果时使用（例如，在背景上放置一张图片而不是纯色背景）。其余的，按照上述方法处理即可。

- Valer

Answer 4

如果您想使用更为现代的渐变方向语法，请使用to bottom，例如：

background: -webkit-linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255, 1));

- JazzBrotha