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

新手上路,请多包涵

我想知道是否可以使用纯 CSS 复制热门推文列表底部的效果?

http://www.twitter.com

原文由 Rana 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 318
2 个回答

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

摩斯拉:

 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。

原文由 derekerdmann 发布,翻译遵循 CC BY-SA 3.0 许可协议

虽然这不是一个全面的解决方案,但它适用于 Safari/Webkit - 所以对于做移动应用程序的人来说很高兴知道。

所以,假设您只处理 webkit,您就拥有了 这里 描述的这个不错的功能。

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

当您无法使用某些覆盖元素伪造淡出效果时,这也会对您有所帮助。 (例如,背景上有图像,而不是纯色)

对于其余部分,请执行上述操作。

原文由 Valer 发布,翻译遵循 CC BY-SA 3.0 许可协议

推荐问题
logo
Stack Overflow 翻译
子站问答
访问
宣传栏