CSS3透明渐变与Photoshop ColorPicker类似

Question

我尝试用CSS创建透明渐变。我需要它用于颜色选择器应用程序。我有一个透明的PNG，我可以使用，但它是20kb大，并将请求一个新的HTTP请求。代码应该是超轻的。

以下是我到目前为止所做的事情： http://jsfiddle.net/78SEK/ 好的一个和底部的一个用CSS制作。

我还尝试过使用HTML5 Canvas但我无法得到完全匹配。 有没有办法可以做到这一点？ 感谢名单

Answer 1

您只需要2个渐变。一个从白色到透明从左到右，一个从透明到黑色从上到下：

http://jsfiddle.net/SKFRS/

HTML：

<div id="white_grad"><div id="black_grad"></div></div>
<p>CSS3 Gradient</p>

CSS：

#white_grad {
    background:-moz-linear-gradient(0deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) repeat scroll 0 0 transparent;
    height:255px;
    width:255px;
}

#black_grad {
    background:-moz-linear-gradient(90deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)) repeat scroll 0 0 transparent;
    border:1px solid #333333;
    height:255px;
    width:255px;
}

您还可以使底部渐变从黑色变为所需颜色，而不是透明。然后你的背景可以是任何颜色，你的div仍然会有所需的效果：

http://jsfiddle.net/SKFRS/3/

如果你想以编程方式改变它，第一种方法可能更好，底部是固体背景层。