Css 使用渐变生成饱和度/亮度遮罩

我想知道是否有可能生成一个饱和度+亮度的遮罩，例如在颜色选择器中使用（类似于），但在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 */

但是我不能做出像这幅画一样的东西，找不到合适的组合，因为我不完全理解，我不知道这是否可能

---

谢谢

也许这就是你写它的方式

对于图像，1渐变+背景色即可

您没有正确关闭规则，仍然需要一个值

100%）

，

/*li

：）

这可能是：

---

（渐变覆盖身体）

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

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

在这里，您可以将结果与基于图像的解决方案（法线=渐变，悬停=引导颜色选择器）进行比较

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