Question

我想知道是否可以生成一个饱和度+亮度的遮罩，例如在颜色选择器中使用（类似http://johndyer.name/lab/colorpicker/refresh_web/colorpicker/images/map-hue.png），但在css3中只使用线性渐变？我尝试了几件事，比如：

background: linear-gradient(to right, hsla(0,100%,0,0) 0%, hsla(0,0%,0%,.5) 100%), /* saturation mask */
            linear-gradient(to top, hsla(0,0%,0%,.5) 0%, hsla(0,0%,100%,.5) 100%), /* lightness mask */

但是我不能像画面一样，找不到合适的组合，因为我不完全明白，我不知道是否可能。

由于

Answer 1

这可能是你写它的方式。

对于图像，1渐变+背景颜色。
您没有正确关闭规则，仍然需要一个值100%) , /* li ：）
这可能是它：

ele {
background: 
    linear-gradient(0deg, hsla(0,0%,0%,.5) 0%, hsla(0,0%,100%,.5) 100%) no-repeat left ,
    white   linear-gradient(180deg, hsla(0,0%,0%,.5) 0%, hsla(0,0%,100%,.5) 100%) no-repeat right;
    background-size:95% 100%, 5% 100%;
}

http://codepen.io/anon/pen/ubDsr（渐变覆盖身体）

Answer 2

你的渐变被反转，一些不正确的hsla值。只需使用十六进制表示法，在这种情况下更容易：

background-image:
  linear-gradient(to top, #000 0%, transparent 100%),   /* lightness*/
  linear-gradient(to right, #fff 0%, transparent 100%); /* saturation */

这是一个demo，您可以将结果与基于图像的解决方案进行比较（normal = gradients，hover = Bootstrap Colorpicker）。

使用渐变生成饱和度/亮度蒙版

2 个答案: