Question

我正在构建一个颜色选择器，它使用CSS渐变代替图像。我有一个CSS渐变，适用于HSB颜色选择，但我无法为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个线性渐变：

亮度：白色至透明至黑色（水平渐变）
饱和度：完全饱和的颜色变为灰色（＃808080）（垂直渐变）

这是一个小提琴：http://jsfiddle.net/leaverou/qVsFN/3/

注意：

你在第一个问题上出了什么问题并且让你感到困惑的是你认为每个渐变只限制了两个颜色。如你所见，它们比那更灵活：）
为什么4种颜色会停止而不是3种亮度渐变？因为透明实际上映射到rgba（0,0,0,0）所以透明到白色渐变不是你所期望的。
CSS3中不需要2个元素，只需要在一个图像中有多个背景，所以我删除了额外的元素。 ;）

那么改变色调呢？只需用red代替新颜色的完全饱和版本（Hue = what，sat = 100，lightness = 50） - 这就是你的颜色选择器！

在图像之后创建CSS渐变

1 个答案: