使用漸變生成飽和度/亮度蒙板

我想知道是否可以生成用於顏色拾取器（例如http://johndyer.name/lab/colorpicker/refresh_web/colorpicker/images/map-hue.png）但在css3中僅使用線性漸變的飽和度+亮度蒙板？我試過severals的東西，如：使用漸變生成飽和度/亮度蒙板

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

，但我不能讓類似的圖片，無法找到合適的combinaison，因爲我不完全理解，我不知道這是可能的。

謝謝

來源

2013-06-20 Stéphane. D.

這也許是你寫它的方式。

爲圖像，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（梯度覆蓋體）

來源

2013-06-21 01:19:36

你有你的梯度逆轉和一些不正確的hsla值。只需使用16進制，它在這種情況下，更容易：

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

這裏有一個demo您可以比較與基於圖像的解決方案的結果（正常=梯度，懸停=自舉取色）。

來源

2015-08-28 15:00:25

使用漸變生成飽和度/亮度蒙板

回答

相關問題