CSS에서 rgba()를 사용할 때 발생하는 문제와 해결 방법

오늘 문제가 발생했습니다. 페이지에 반투명 흰색 div를 설정해야 합니다. 이는 문제가 되지 않는 것 같습니다. 이 div에 대해 다음 속성을 설정하면 됩니다.

background: rgba(255,255,255,.1);

단, ie8과 호환되어야 합니다. 이것은 약간 고통 스럽습니다. ie8은 rgba() 기능을 지원하지 않기 때문입니다. 아래에서는 rgba() 함수의 의미를 요약합니다.

rgba의 의미 r은 빨간색, g는 녹색, b는 파란색, 빨간색, 녹색, 파란색은 삼원색을 의미합니다. 모든 색상은 이 세 가지 색상을 조합할 수 있습니다. a는 투명성을 나타냅니다. 예를 들어 rgba(255, 255, 255, 0.1)는 투명도가 0.1인 흰색입니다. RGB는 최신 브라우저에서 지원됩니다. 그러나 IE8과 같은 구식 브라우저에서는 rgba가 지원되지 않습니다. IE8에서는 rgb() 기능만 거의 지원할 수 없습니다(즉, 투명도가 제거되고 색상만 표현할 수 있음).

따라서 IE8에서 반투명도를 설정하려면 약간의 두뇌가 필요합니다. 이 문제를 해결하기 위해 IE의 필터를 사용할 수 있다는 것을 마스터로부터 배웠습니다. CSS 코드는 다음과 같습니다.

background: rgba(255,255,255,.1);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#19ffffff,endColorstr=#19ffffff);

두 번째 문장은 이전 줄의 투명도가 작동하지 않을 때 실행된다는 의미입니다. 이 문장의 의미는 원래 그라데이션을 만드는 데 사용되었습니다. 그러나 여기에는 그라데이션이 필요하지 않습니다. 따라서 두 색상이 모두 같은 색상으로 설정됩니다.

이번 컬러 "#19ffffff"는 두 파트로 구성되어 있으니 참고해주세요.

첫 번째 부분은 # 이후 19입니다. rgba 투명도의 IEfilter 값은 0.1입니다. 0.1부터 0.9까지의 각 숫자는 IEfilter 값에 해당합니다. 해당 관계는 다음과 같습니다.

두 번째 부분은 19 뒤의 6자리입니다. 16진수 색상 값입니다. rgb 함수의 값과 동일해야 합니다. 예를 들어 rgb(255,255,255)는 #ffffff에 해당하며 둘 다 흰색입니다.

이 시점에서 rgba 사용은 IE8과 호환됩니다.

위 내용은 CSS에서 rgba()를 사용할 때 발생하는 문제와 해결 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!