CSS 그라디언트 : 두 번째 정지 색상 계산

Question

버튼 배경 그라디언트의 두 번째 16 진수 색상을 첫 번째 (아래 예제 참조)로 계산할 수 있기를 원합니다.

그래서 사용자로부터 색상 선택 도구를 통해 첫 번째 색상을 얻고 자바 스크립트를 사용하여 색상을 얻습니다 (예 : 아래 샘플에서 #ededed). 첫 번째 색상을 기반으로 JS를 사용하여 두 번째 색상과 그라디언트 효과 (아래 샘플에서는 #dfdfdf)를 생성하는 오프셋을 계산하고 싶습니다. 색상 이동은 항상 같고 입력 및 출력 16 진수 색상이 다를뿐입니다.

사용할 수있는 공식 또는 기능이 있습니까? 감사!

background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf)); 

Answer 1

정확히 알다시피, -webkit-gradient에 "이전"형식을 사용하고 있습니다. 대신이를 사용하여 업데이트해야합니다 :

-webkit-linear-gradient(top, #ededed 5%, #dfdfdf) 

이제, 실제 문제에, 두 번째 색상이 계산되는 방법을 지정하지 않았습니다. 네가 준 예제를 고려해 보면, 그늘이 가볍기를 바란다. 이 경우, 당신은이 작업을 수행 할 수 있습니다

var color = "#ededed"; 
var components = [ 
    (255-(255-parseInt(color.substr(1,2),16))/2).toString(16), 
    (255-(255-parseInt(color.substr(3,2),16))/2).toString(16), 
    (255-(255-parseInt(color.substr(5,2),16))/2).toString(16) 
]; 
if(components[0].length < 2) components[0] = "0"+components[0]; 
if(components[1].length < 2) components[1] = "0"+components[1]; 
if(components[2].length < 2) components[2] = "0"+components[2]; 
var out = "#"+components[0]+components[1]+components[2]; 

이 당신에게 원본 색상과 (효과적으로 위에 흰색 50 % -opacity를 오버레이) 순수한 흰색의 중간 색을 제공 할 것입니다. 더 어두운 그늘을 얻으려면 255-(255- 비트와 해당하는 )을 제거하면됩니다.

편집 :

우리는 자세한 내용을 필요

background:#ededed -webkit-linear-gradient(top,rgba(255,255,255,0),rgba(255,255,255,1)); 

Answer 2

필자는 이것을 테스트하지 않았지만 내 접근 방식은 16 진수 대신 RGB 값을 사용하는 것입니다. 그런 다음 변수를 사용하여 두 가지 색상 값을 유지하십시오. 두 번째 변수는 첫 번째 변수의 값 (in, @ color2 = @ color1 + 2)을 기반으로 계산 될 수 있습니다.