使用 CSS 3 的渐变 alpha 淡出效果答案

【问题标题】：Gradient alpha fade out effect with CSS 3使用 CSS 3 的渐变 alpha 淡出效果
【发布时间】：2010-08-22 23:23:53
【问题描述】：

我想知道是否可以使用纯 CSS 复制类似于 Top Tweets 列表底部的效果？

【问题讨论】：

【解决方案1】：

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

Mozilla：

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

网络套件：

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。

【讨论】：

您也可以通过filter（IE7 和更早版本）和-ms-filter（IE 8 和 9）使其在旧版 IE 中运行。见stackoverflow.com/questions/213750/… 和stackoverflow.com/questions/5159136/…
这仅适用于该对象的背景为白色或静态的情况。想象一下，这个元素的背后是一个渐变或图像。

【解决方案2】：

虽然这不是一个全方位的解决方案，但它可以在 Safari/Webkit 上运行 - 所以对于开发移动应用程序的人来说很高兴知道。

所以，假设你只处理 webkit，你已经得到了 here 描述的这个不错的功能。

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

当您无法使用某些叠加元素伪造淡出时，这也可以帮助您。（例如，在背景上放一张图片，而不是纯色）

剩下的就按照上面说的吧。

【讨论】：

【解决方案3】：

如果您想为渐变使用更多最新的方向语法，请使用to bottom，如

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

【讨论】：