渐变Alpha渐变效果与CSS 3 [英] Gradient alpha fade out effect with CSS 3

问题描述

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

http://www.twitter.com

解决方案

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

Mozilla：

  background：-moz-linear-gradient（top，rgba（255,255,255,0），rgba（255,255,255，1））; 
  

Webkit：

 code> background：-webkit-linear-gradient（top，rgba（255,255,255,0），rgba（255,255,255，1））; 
  

（在更改Webkit渐变后更新）
$ b

很遗憾，这只适用于Firefox 3.6+，Safari和Chrome。如果你需要在IE或旧版本的Firefox的效果，那么你最好使用半透明的PNG像Twitter。

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

解决方案

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.

这篇关于渐变Alpha渐变效果与CSS 3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！