[CSS3] rgba(0,0,0,0.25) rgba(red, green, blue, alpha) vs opacity

Posted by 낯선.공간
2015. 7. 21. 18:22
반응형

 [CSS3] rgba(0,0,0,0.25) rgba(red, green, blue, alpha) vs opacity

CSS3 rgba(0,0,0,0.25) rgba(red, green, blue, alpha) 





   

텍스트의 color 값을 rgba 로 설정한다. 

rgba 는 red, green, blue, alpha 로 기존의 RGB이외에 알파값의 투명도까지 한번에 설정해줄 수 있다. 

빨간색으로 설정하는경우 rgba(255, 0, 0, 1) 로 설정. 

R, G, B 값은 0~255 까지의 값을 가지며 a 값은 0~1 까지의 값을 가진다. 

아래는 빨간색을 투명도 0.25로 설정한 것. 25%의 투명도 값을 갖게 된다.

25%의 투명도에 빨간색 텍스트

100%의 투명도에 빨간색 텍스트

   

25%의 투명도에 빨간색 텍스트


100%의 투명도에 빨간색 텍스트

rgba가 텍스트의 투명도를 조정하는 CSS라면, opacity는 객체의 투명도를 제어할 수 있다.








를 적용해보겠다. 

아래의 박스는 CSS3를 실제 적용한 태그의 소스가 적용되어 있다. 

IE 8이하 버전에서는 똑같이 보일테지만, 크롬이나 9이상에서는 정상적으로 다르게 보일 것이다.

   

CSS3의 스타일 투명 속성들은 IE8이하에서는 무용지물이다. 

IE8이하에서 투명속성을 지원을 위해서라면 Filter를 이용해서 비슷하게 구현할 수 있다.

이 부분에 대한 포스팅은 추후에....

브라우저 지원 여부

Safari 1.3+, Chrome 2+, Firefox 3.6+, Opera 10.5+, Internet Explorer 9 beta +



출처 : http://myblogwhat.tistory.com/193

이 댓글을 비밀 댓글로