使用渐变生成饱和度/亮度掩膜

Question

我想知道是否可以使用CSS3中的线性渐变（linear-gradient）生成饱和度和亮度的掩模，就像颜色选择器中使用的一样（类似于http://johndyer.name/lab/colorpicker/refresh_web/colorpicker/images/map-hue.png）？我尝试了几种方法，例如：

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 */

但是我无法制作出像图片那样的东西，找不到合适的组合，因为我并没有完全理解，不知道是否可能。

谢谢

- Stéphane. D.

Answer 1

可能是你的写法有问题。

1. 对于图片，使用1个渐变和一个背景颜色即可。
2. 你没有正确地关闭规则，还需要一个值100%),/* li :)
3. 这可能就是答案：

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（渐变覆盖整个页面）

- G-Cyrillus

Answer 2

你的梯度反了，还有一些不正确的hsla值。 在这种情况下，只需使用十六进制表示法即可更容易地解决问题：

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

这里有一个演示，您可以将其与基于图像的解决方案（正常=渐变，悬停=Bootstrap Colorpicker）进行比较。

- nice ass