具有透明度的渐变

时间:2012-06-20 12:00:17

标签: html css css3

具有透明度的渐变![在此输入图像描述] [1]

我想在底部应用透明的多色渐变,如下图所示。 我找到了几个解释这个的页面,但我仍然无法使其正常工作。

我尝试使用这个小提琴http://jsfiddle.net/QEhsG/2/(在stackoverflow上找到),但我无法完美地获得黑白组合。

有任何帮助吗?

1 个答案:

答案 0 :(得分:3)

alpha= 0提供给您的第一个 rgba 。像这样写

button {
    background-color: black;
    background-image: -webkit-linear-gradient(top, rgba(252, 252, 252, 0) 0%, rgba(186, 186, 186, 1) 100%);
    background-image: -moz-linear-gradient(top, rgba(252, 252, 252, 0) 0%, rgba(186, 186, 186, 1) 100%);
    width: 200px;
    height: 100px;
}

选中此http://jsfiddle.net/QEhsG/6/

已更新

http://jsfiddle.net/QEhsG/8/