그라디언트를 사용하여 채도/밝기 마스크 생성

Question

색상 선택기 (예 : 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을 찾을 수 없습니다, 그림 같은 것을 할 수 없습니다, 그리고 내가 완전히 이해하지 않기 때문에, 나는 알고하지 않습니다 있을 수있다.

감사합니다.

Answer 1

어쩌면 작성하는 방법 일 수 있습니다.

1. 이미지의 경우 1 그라디언트 + 배경색이 적용됩니다.

이

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 (그라데이션이 몸을 커버) :

당신이 제대로 규칙을 닫지 않은, 하나 개의 값은 여전히이 그것을 할 수 100%),/* li :

을 것으로 예상된다

Answer 2

그래디언트를 반전 시켰고 일부 잘못된 hsla를 사용했습니다. 값. 그냥 진수 표기를 사용,이 경우 쉽게 :

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

은 여기 (= 부트 스트랩의 ColorPicker를 가져, 일반 = 구배) 이미지 기반 솔루션으로 결과를 비교할 수있는 demo입니다.