2

我想知道是否可以生成用于颜色选择器的饱和度+亮度蒙版（例如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 */

但是我不能做出像图片一样的东西，找不到合适的组合，而且因为我不完全理解，我不知道是否可以。

谢谢

4

2 回答 2

0

这可能是你写它的方式。

  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（渐变覆盖主体）

于 2013-06-21T01:19:36.380 回答
0

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

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

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

于 2015-08-28T15:00:25.143 回答