在图像后创建 CSS 渐变

Question

我正在构建一个颜色选择器，它在图像上使用 CSS 渐变。我有一个适用于 HSB 颜色选择的 CSS 渐变，但我无法为 HSB 颜色选择创建 CSS 渐变。您可以在以下位置查看原始渐变： http://jsfiddle.net/qVsFN/

渐变 1 应该看​​起来像渐变 2。是否可以这样做只用CSS？我尝试了几种方法，包括径向渐变，但没有成功。

这是我正在使用的 CSS 和标记：

#red_grad {
    background: -moz-linear-gradient(0deg, rgba(255, 255, 255, 1), rgba(255, 0, 0, 1)) repeat scroll 0 0 transparent;
    background: -webkit-gradient(linear, left center, right center, from(rgba(255, 255, 255, 1)), to(rgba(255, 0, 0, 1)));
    height: 262px;
    width: 262px;
}
#black_grad {
    background: -moz-linear-gradient(90deg, rgba(0, 0, 0, 1), transparent) repeat scroll 0 0 transparent;
    background: -webkit-gradient(linear, center bottom, center top, from(rgba(0, 0, 0, 1)), to(transparent)) repeat scroll 0 0 transparent;
    height: 262px;
    width: 262px;
}

<div id="red_grad">
    <div id="black_grad">
    </div>
</div>

您可以在 http://jsfiddle.net/qVsFN/

Answer 1

HSL 饱和度-亮度平面可以用 2 个线性渐变来制作：

1. 亮度：白色到透明到黑色（水平渐变）
2. 饱和度：完全饱和的颜色到灰色 (#808080)（垂直渐变）

这是一个摆弄它： http://jsfiddle.net/leaverou/qVsFN/3/

注意：

• 您在第一个让您感到困惑的是，您认为每个渐变只能使用 2 个色标。正如您所看到的，它们比这更灵活:)
• 为什么亮度渐变使用 4 个颜色停止而不是 3 个？因为透明实际上映射到 rgba(0,0,0,0)，所以透明到白色的渐变不是您所期望的。
• CSS3 中不需要 2 个元素，一张图像中可以有多个背景，所以我删除了多余的元素。 ;)

改变色调怎么样？只需用红色替换新颜色的完全饱和版本（色调=任意，饱和度= 100，亮度= 50）——这就是您的颜色选择器！