Html CSS 3 的渐变 alpha 淡出效果
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3543887/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Gradient alpha fade out effect with CSS 3
提问by Rana
I would like to know if it would be possible to replicate the effect like the bottom of the Top Tweets list with pure CSS?
我想知道是否可以使用纯 CSS 复制 Top Tweets 列表底部的效果？
回答by derekerdmann
Yes you can! Taking advantage of RGBa colors and CSS3 gradients, we can apply the following styles to an element and have a fading semi-transparent background:
是的你可以！利用 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));
(Updated after changes to Webkit gradients)
（在 Webkit 渐变更改后更新）
Sadly, this only works in Firefox 3.6+, Safari, and Chrome. If you need the effect in IE or older versions of Firefox, then you'd be better off using the semi-transparent PNG like Twitter does.
遗憾的是，这只适用于 Firefox 3.6+、Safari 和 Chrome。如果您需要在 IE 或更旧版本的 Firefox 中使用效果，那么您最好像 Twitter 那样使用半透明的 PNG。
回答by Valer
Although this is not an all-around sollution, it works on Safari/Webkit - so it's nice to know for someone who does mobile apps.
虽然这不是一个全面的解决方案，但它适用于 Safari/Webkit - 所以很高兴知道那些做移动应用程序的人。
So, suppose you only address webkit, you've got this nice feature described here.
所以，假设您只处理 webkit，您已经获得了这里描述的这个不错的功能。
-webkit-mask-image: -webkit-gradient(...)
This also helps you when you can't fake the fade-out with some overlaid element. (for example, having an image on the background, instead of a solid color)
当您无法使用某些叠加元素伪造淡出效果时，这也对您有所帮助。（例如，在背景上有一个图像，而不是纯色）
For the rest, go with the above.
其余的，按照上面的去做。
回答by JazzBrotha
If you want to use more up to date direction syntax for the gradient use to bottom, as in
如果您想对渐变使用更多最新的方向语法，请使用to bottom，如
background: -webkit-linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255, 1));
