>

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

예를 들어, 다음 CSS :

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

jQuery.css ( 'background-color') 또는 네이티브 CSSStyleDeclaration.getPropertyValue ( 'background-color')를 통해 액세스 할 때 다음 CSS 값을 제공합니다.

rgba(255, 0, 0, 0.498039)

여기에 더 많은 예제가있는 바이올린이 있습니다 : http://jsfiddle.net/hgFEj/3/

Chrome과 Safari는 다른 결과를 제공합니다. Firefox는 입력 한대로 정확한 값을보고하는 유일한 브라우저 인 것 같습니다. 버그입니까, 아니면 의도적 인 것입니까?


  • 답변 # 1

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

    32 비트 색상은 각각 0-255 범위 내에있는 4 개의 8 비트 구성 요소로 분류됩니다.빨간색,녹색,파란색알파입니다. 우리는알파, 즉 투명도를 분수 또는 백분율로 표현합니다. 그것은 소수의 사람들이 얼마나 투명한 지에 대한 더 빠른 아이디어를 얻도록 도와주기 때문입니다. 100 % 투명도가 1이 아니라 0이기 때문에 실제로는 불투명도 (음,불투명도)로 생각하는 것이 좋습니다.

    이제 255는알파값의 분모이므로 0.5를 정확하게 표현할 방법이 없습니다. 표시되는 값인 0.498039는 가장 가까운 분수 인 127/255 (소수점 6 자리로 반올림)에서 나옵니다. 사파리는 소수점 이하 6 자리로 127/256으로 반올림 한 0.496094를 반환하며 257 값을 의미하는 버그 인 것 같습니다. 또한 소수점 이하 두 자리로 반올림하지 않는 한 Firefox에서 0.5를 정확하게보고 할 수있을 것입니다.

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

    parseFloat(
       $('#divWith50PercentAlphaBackgroundStyle')
          .css('background-color')
          .split(',')[3],
       10
    )
    
    
    그런 다음이 값을 가지고 switch 를 수행하십시오.  다른 브라우저가 반환하는 값과 비교하여 예상 한 가장 가까운 올바른 값으로 올바르게 변환합니다.

관련 자료

  • 이전 f# - 차별적 인 조합 태그를 인수로 전달할 수 있습니까?
  • 다음 c++ - QT 및 MinGW32가있는 Windows에서 메모리 누수 검사