Javascript를 통해 CSS를 통해 정확한 RGBa 값을 얻는 방법은 무엇입니까?

Question

시도한 대부분의 브라우저에서 브라우저가 CSS를 구문 분석하면 RGBa 값이 변경된 것으로 보입니다. 예를 들어

, 다음 CSS : jQuery.css ('배경 색') 또는 기본 CSSStyleDeclaration.getPropertyValue ('배경 색')를 통해 액세스 할 때

background-color: rgba(255, 0, 0, 0.5); 

는 다음과 같은 CSS 값을 제공합니다 :

rgba(255, 0, 0, 0.498039) 

여기에 더 많은 예제와 바이올린의 :

http://jsfiddle.net/hgFEj/3/는 크롬과 사파리는 다른 결과를 제공합니다. Firefox는 정확한 값을 입력 한 것으로보고하는 유일한 브라우저 인 것 같습니다. 이것은 버그입니까, 디자인입니까?

Answer 1

Mark Hubbart의 의견은 정확합니다.

32 비트 색 구분 다운 0-255 범위 내에서 4 개의 8 비트 성분 각각에 : 적색, 녹색 블루및 알파. 알파 또는 투명도를 분수 또는 백분율로 나타냅니다. 십진화 된 사람들이 그것이 얼마나 투명한지 더 빨리 알 수있게 도와줍니다. 그것은 (물론, 불투명도) 100 % 투명 이후 255 소정 지금하지 1.

0 백탁 같이 실제로 더 생각되는 알파 값의 분모 인 0.5을 표현하는 방법이 없다 정확하게. 표시되는 값 0.498039는 가장 가까운 소수 인 127/255 (소수점 이하 6 자리로 반올림 됨)에서옵니다. 사파리는 0.496094를 반환하는데 127/256은 소수점 이하 6 자리로 반올림되며 나에게는 257 개의 값을 암시하는 버그가있는 것으로 보입니다. 또한 소수점 이하 2 자리로 반올림되지 않는 한 파이어 폭스가 정확하게 0.5를보고 할 수 있을지 의심 스럽다.

첫 번째 실행시 50 % 알파로 반환되는 값을 확인하고 이에 따라 모든 계산을 조정하는 jQuery 플러그인을 작성하면 다른 브라우저에서이 문제를 해결할 수 있습니다.

parseFloat(
    $('#divWith50PercentAlphaBackgroundStyle') 
     .css('background-color') 
     .split(',')[3], 
    10 
) 

그런 다음, 손에이 값을, 다른 브라우저는 반환 값에 대한 그것에 switch을, 제대로 당신이 기대하고있는 가장 가까운 올바른 값으로 변환합니다.