问题
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?
http://www.twitter.com
回答1:
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:
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)
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.
回答2:
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.
So, suppose you only address webkit, you've got this nice feature described here.
-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.
回答3:
If you want to use more up to date direction syntax for the gradient use to bottom, as in
background: -webkit-linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255, 1));
来源：https://stackoverflow.com/questions/3543887/gradient-alpha-fade-out-effect-with-css-3