使用CSS3渐变alpha淡出效果-GradientalphafadeouteffectwithCSS3

20  

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。

1  

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.

其余的,请按照上面的说法进行操作。