CSS3 RGBA 속성의 고급 사용

저자：Eve Cole 업데이트 시간：2010-03-10 16:01:31

현재 CSS3에서 널리 사용되는 RGBA 속성의 고급 사용법에 대해 이야기해 보겠습니다. 이 속성의 호환성 문제는 비교적 간단합니다. IE8은 이미 이 속성을 지원하고 있으며 IE6과 IE7도 해킹을 통해 지원할 수 있습니다. RGBA는 RGBA 속성에 투명도에 대한 추가 정의가 있다는 점을 제외하면 CSS2의 RBG 속성과 유사합니다. CSS3 표준의 RGBA 속성에 대한 설명은 다음과 같습니다.

/*기본 구문*/
em { 색상 : Rgba ( 빨간색 , 녹색 , 파란색 , 불투명도 ) }
/* 예*/
em { color : rgba ( 255 , 0 , 0 , 1 ) } /* 빨간색, 불투명 */
em { color : rgba ( 100 % , 0 % , 0 % , 1 ) } /* 위와 동일*/

실제로는 1부터 255까지 3개의 십진수 값을 사용하여 색상을 정의하는 것이 백분율을 사용하는 것보다 더 정확합니다. 다음은 여러 색상의 RGB 값을 사용하는 경우에만 16진수 값을 변환하면 됩니다. 00부터 FF까지 10진수가 됩니다.

RGBA 속성을 사용하는 방법

RGBA의 힘은 물감을 섞듯이 투명도를 정의하고 여러 레이어에 색을 섞어서 더 많은 색상을 표현할 수 있다는 점입니다. 예를 들어 먼저 페이지의 배경 이미지를 설정한 다음 페이지의 H1에 있는 콘텐츠의 색상을 설정합니다. 예를 들면 다음과 같습니다.

h1 {
색상 : rgb ( 0 , 0 , 0 ) ;
배경색 : rgb ( 255 , 255 , 255 ) ;
}

효과는 다음과 같습니다.

여기서 H1에는 투명 효과가 없음을 알 수 있습니다.

그런데 H1에 전체적인 투명도(불투명도 속성)를 설정하지 않으면 어떤 효과가 있을까요?

h1 {
색상 : rgb ( 0 , 0 , 0 ) ;
배경색 : rgb ( 255 , 255 , 255 ) ;
불투명도 : 0.5 ;
}

여기서 볼 수 있는 효과는 텍스트를 포함한 전체 H1이 50% 투명하다는 것입니다. 그러나 텍스트 투명도는 읽기에 영향을 미칩니다. RGBA 속성을 사용하여 H1의 배경색을 별도로 설정해 보겠습니다.

h1 {
색상 : rgb ( 0 , 0 , 0 ) ;
배경색 : rgba ( 255 , 255 , 255 , 0.5 ) ;
}

여기에서 H1의 배경은 50% 투명한 흰색이지만 내부 텍스트는 여전히 불투명한 검정색임을 볼 수 있습니다. 물론 H1의 텍스트만 투명하게 만들 수도 있습니다.

h1 {
색상 : rgba ( 0 , 0 , 0 , 0.5 ) ;
배경색 : rgb ( 255 , 255 , 255 ) ;
}

텍스트만 투명하게 하면 종이 컷아웃 효과를 만들 수 있습니다. 추가 사용법

RGBA는 색상을 설정해야 하는 모든 곳에서 사용할 수 있습니다. 예:

div {
색상 : rgb ( 0 , 0 , 0 ) ;
배경색 : rgb ( 255 , 255 , 255 ) ;
테두리 : 10px 솔리드 rgba ( 255 , 255 , 255 , 0.3 ) ;
}

모든 div에 대해 투명도를 30%로 설정하고 선 너비가 10px인 흰색 단색 테두리를 설정합니다.

div {
색상 : rgba ( 255 , 255 , 255 , 0.8 ) ;
배경색 : rgba ( 142 , 213 , 87 , 0.3 ) ;
}
div : 호버 {
색상 : rgba ( 255 , 255 , 255 , 1 ) ;
배경색 : rgba ( 142 , 213 , 87 , 0.6 ) ;
}

투명도를 변경하려면 마우스를 올려놓으세요.

또한, RGBA 속성을 자바스크립트와 결합하면 더욱 화려한 효과를 낼 수 있습니다.

CSS 작성 습관을 바꾸십시오.

위의 예에서 작성자는 전통적인 #xxx 형식의 16진수 표현을 사용하는 대신 rgb()를 사용하여 색상을 지정했음을 알 수 있습니다. CSS3의 RGBA 속성을 위해 준비된 작성 방법입니다. 색상을 지정하기 위해 rgb()를 사용하는 것은 rgba()가 불투명하다는 의미로 이해될 수 있지만 둘 사이의 차이는 매우 작기 때문에 rgba로 업그레이드하는 데 큰 편리성을 가져다 줄 것입니다. () 미래에.

모든 브라우저와 호환

최신 버전의 주류 브라우저는 이미 RGBA 속성을 지원하지만 이전 브라우저를 사용하는 사용자도 관리해야 하므로 어떤 곳에서는 이전 방법을 사용하는 것이 더 안전할 것입니다. 여러 가지 방법이 있으며 누구나 필요에 따라 선택할 수 있습니다.

1. 하위 버전에서는 RGBA 속성을 사용하지 않습니다.

이는 하위 버전 브라우저의 효과에 영향을 미치지만 가장 간단한 방법이며 가장 안전한 방법은 다음과 같습니다.

h1 {
색상 : RGB ( 127 , 127 , 127 ) ;
색상 : rgba ( 0 , 0 , 0 , 0.5 ) ;
}

rgb 색상을 먼저 설정한 후 rgba 색상을 설정하면 rgba 속성을 지원하지 않는 브라우저에서는 rgb 색상만 표시되고, rgba를 지원하는 브라우저에서는 재정의로 인해 rgba 색상이 표시됩니다.

2. 투명한 PNG 이미지를 배경으로 사용합니다.

PNG 형식의 장점은 이미지의 투명도 기능을 웹 페이지에 표시할 수 있다는 것입니다.

h1 {
배경 : 투명 URL ( black50.png ) ;
배경 : rgba ( 0 , 0 , 0 , 0.5 ) 없음 ;
}

투명도가 50%인 PNG 배경을 통해 rgba와 동일한 효과를 얻을 수 있습니다.

3. IE 해킹은

IE의 개인 속성을 사용하여 IE6 및 IE7을 해결할 수 있으며 이는 rgba와 동일한 효과를 얻을 수 있습니다.

h1 {
필터 :progid :DXImageTransform .Microsoft .Gradient ( GradientType = 1 , StartColorStr = '#80000000' , EndColorStr = '#80000000' ) ;
}

주목해야 할 것은 StartColorStr과 EndColorStr의 값입니다. 처음 두 자리는 16진수 투명도이고 마지막 6자리는 16진수 색상입니다.

원본 링크: CSS3 RGBA 속성의 고급 사용

그의 기여에 감사 드립니다 .