CSS에서 투명도를 위해 rgba (0, 0, 0, 0) 또는 rgba (255, 255, 255, 0)를 사용해야합니까?

Question

CSS의 투명성을 위해 rgba(0, 0, 0, 0) 또는 rgba(255, 255, 255, 0)을 사용해야합니까?

각 장단점은 무엇입니까?

Answer 1

rgba() 함수의 마지막 매개 변수는 "alpha"또는 "opacity"매개 변수입니다. 0으로 설정하면 "완전히 투명"을 의미하며 처음 세 개의 매개 변수 (red, green 및 blue 채널)는 색상을 볼 수 없기 때문에 중요하지 않습니다.

1. 이 덜 타이핑이야 그것은 당신의 CSS 파일에서 몇 가지 추가 바이트를 유지,
2. , 그리고
는
3. 당신은 분명 문제가 표시됩니다 염두에두고
   , 때문에 rgba(0, 0, 0, 0)를 선택할 것 알파 값이 바람직하지 않은 값으로 변경되는 경우

당신 은 전부 rgba 모델을 피하고 w3.org에 따르면, "투명한 블랙"에 해당하고 rgba(0, 0, 0, 0)로 계산해야하는 대신 transparent 키워드를 사용할 수 있습니다. 예를 들면 다음과 투명성을 사용하는 당신의 의도가 분명하다 동안이 또 다른 몇 바이트를 저장

h1 { 
    background-color: transparent; 
} 

(경우에 하나의 RGBA에 익숙하다).

CSS3부터는 색상을 허용하는 CSS 속성에 transparent 키워드를 사용할 수 있습니다.

Answer 2

알파를 사용하여 색상을 저장하는 두 가지 방법이 있습니다. 첫 번째 부분은 각 구성 요소를 그대로 사용하면서 본 것입니다. 두 번째는 미리 곱한 알파을 사용하는 것입니다. 여기서 색상 값은 0.0-1.0 범위로 변환 한 후 알파를 곱합니다. 이것은 compositing을 쉽게하기 위해 수행됩니다. 일반적으로 특정 엔진에 의해 어떤 방법으로 구현 되었는가를주의하거나 신경 쓰지 않아야합니다. 예를 들어 색상의 불투명도를 높이려는 경우와 같은 경우가있을 수 있습니다. rgba(0, 0, 0, 0)을 사용하면 두 가지 접근 방식의 차이점을 볼 확률이 줄어 듭니다.

Answer 3

유 RGBA (255, 255, 255, )를 사용하여 작은 차이 배경색보다 0.0 내지 1.0 ''증가의 값보다 경량화가된다. rgba (0,0,0, )를 사용할 때 'a'의 값이 0.0에서 1.0으로 증가함에 따라 배경색이 점점 더 어두워집니다. 그런데, (255,255,255,0)과 (0,0,0,0) 모두가 배경을 투명하게 만든다는 것이 분명합니다. . (255,255,255,1)은 (0, 0, 1, 1)이 완전히 검은 색이되는 곳에서 배경을 완전히 흰색으로 만듭니다.