类似于 Photoshop ColorPicker 的 CSS3 透明渐变

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/

如果您想以编程方式更改它，第一种方法可能更好，底部为纯色背景层。