1

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

这是我到目前为止所做的：http: //jsfiddle.net/78SEK/ 上面的那个是好的，下面的一个是用 CSS 制作的。

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

4

1 回答 1

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/

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

于 2010-04-29T18:15:13.857 回答