전통적으로 CSS에 사용되는 색상은 16진수 형식이거나 rgb(171,205,239)와 같은 rgb 형식입니다.
.jpg)
CSS3는 HSL(색조, 채도, 빛) 및 불투명도/알파 채널을 사용하는 등 색상을 처리하는 몇 가지 새로운 방법을 제공합니다. 불행하게도 현재는 Firefox 3+, Chrome 1.0+, Safari 3+와 일부 파생 브라우저에서만 이를 완벽하게 지원합니다. 하지만 우리는 최선을 다할 수 있으며 IE는 Internet Explorer 9이 나올 때까지 일부 CSS3 속성을 지원하지 않을 것입니다.
불투명
이는 실제로 오래된 속성이며 놀랍게도 현재 버전의 IE에서 지원됩니다. 비록 더 복잡한 방식이기는 하지만 말입니다.
불투명도는 전체 CSS 객체를 투명하게 만들고 모든 하위 요소의 투명도가 적절하게 상속됩니다. 공식 구문은 다음과 같습니다.
불투명도: [십진수 0-1];
따라서 opacity: 0.5; 설정은 개체를 50% 투명하게 만듭니다. 최신 브라우저에서는 이를 적극적으로 지원하지만 이전 브라우저에는 Internet Explorer와 마찬가지로 여전히 일부 사용자 지정 코드가 필요합니다.
현재, 이전 Firefox 버전의 경우 -moz- 접두사를 사용해야 하고, 이전 Safari/Chrome 버전의 경우 -webkit- 접두사를 사용해야 합니다. 여전히 웹킷 커널 대신 KHTML 커널을 사용하는 이전 버전의 Safari의 경우 -khtml-을 사용해야 합니다. 따라서 모든 브라우저를 지원하려면 코드는 다음과 같아야 합니다.
불투명도: 0.5;
-moz-불투명도: 0.5;
-웹킷 불투명도: 0.5;
-khtml-불투명도: 0.5;
아, 잠깐만요! IE로 무엇을 해야 할까요? 글쎄, IE는 이것을 전혀 지원하지 않지만 독점 필터를 사용합니다. 전통적인 방법은 짧고 간결합니다.
필터:알파(불투명도=50);
IE의 경우 opacity 속성과 같은 소수가 아닌 0에서 100까지의 정수를 사용해야 한다는 점에 유의하세요. 안타깝게도 Internet Explorer 8에서는 이를 처리하는 새로운 방법을 제공합니다. 다른 것과 마찬가지로 이것을 기억하려고 하지 마세요. 너무 길기 때문입니다.
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(불투명도=50)";
물론, 이전 IE 브라우저를 지원하려면 위의 더 짧은 브라우저를 사용해야 합니다. 즉, 대부분의 브라우저와 호환되려면 총 6개의 CSS 문이 필요하다는 뜻입니다.
추신: 실제로 Safari는 버전 1.2(2004)부터 불투명도 속성을 지원했습니다. KHTML 코어가 포함된 Safari는 기본적으로 더 이상 찾기 어렵습니다. 실제로 Konqueror는 -khtml-opacity 속성을 지원하지 않으므로 사용하지 마세요. (번역 시 원문의 무결성을 고려하여 위 코드에 대한 수정은 하지 않았습니다.) Opera는 9.0부터 CSS3 불투명도를 지원했지만 Firefox는 3.5까지 기본적으로 불투명도를 지원하지 않았습니다. IE8의 -ms- plus 필터는 정말 Microsoft의 천재적인 작품입니다! 다만, filter와 -ms-filter를 동시에 사용하고 싶다면 filter 앞에 -ms-filter가 적혀 있으니 참고하시기 바랍니다. ——선페이