CSS3 튜토리얼(8): CSS3 투명성 가이드

CSS3 투명...불투명...그라데이션...무엇이라 부르든 상관없습니다! 다음은 몇 가지 예와 함께 CSS3 투명성을 사용하기 위한 몇 가지 지침입니다.

사실 Firefox는 오래 전부터 이것을 지원했지만 IE는 한 번도 지원한 적이 없습니다!
이전 기사: CSS3 튜토리얼 (7): CSS3 내장 글꼴
"불투명도" 문은 레이어, 텍스트, 이미지 등 요소의 투명도를 설정하는 데 사용됩니다... 불투명도 값이 다음과 같은 요소 1은 완전히 불투명한 반면, 0의 값은 완전히 투명하고 보이지 않습니다. 1과 0 사이의 값은 요소의 투명도를 나타냅니다.
브라우저 호환성
불투명성은 브라우저에서 가장 잘 지원되는 CSS3 요소입니다. 물론 IE는 제외됩니다! CSS3 투명도(예 1: 레이어)

위의 투명 예에서는 다음 스타일을 사용합니다.

p.opacityL1 { background:#036; opacity:0.2; width:575px; height:20px; } p.opacityL2 { background:#036; opacity:0.4; width:575px; height:20px; } p.opacityL3 { background:#036; opacity:0.6; width:575px; height:20px; } p.opacityL4 { background:#036; opacity:0.8; width:575px; height:20px; } p.opacityL5 { background:#036; opacity:1.0; width:575px; height:20px; }

브라우저 지원:

Firefox(3.05…)

Google Chrome(1.0.154…)

Google Chrome(2.0.156…)

Internet Explorer(IE7, IE8 RC1 )

Opera(9.6…)

Safari(3.2.1 windows…) CSS 3 Transparent (예 2: 그림)

위의 예처럼 이미지에 다양한 투명도 수준으로 투명도 효과를 사용할 수도 있습니다. 멋진 응용 프로그램은 :hover에 불투명도를 적용하여 링크 마우스 오버 효과를 얻는 것입니다.

img.opacity1 { opacity:0.25; width:150px; height:100px; } img.opacity2 { opacity:0.50; width:150px; height:100px; } img.opacity3 { opacity:0.75; width:150px; height:100px; }

브라우저 지원:

Firefox(3.05…)

Google Chrome(1.0.154…)

Google 크롬(2.0.156…)

인터넷 익스플로러(IE7, IE8 RC1)

오페라(9.6…)

사파리(3.2.1 windows…)

위 내용은 CSS3 Tutorial (8): CSS3 Transparency Guide 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!

관련 기사:

CSS 요소를 반투명으로 설정

CSS3에서 RGBa를 사용하여 투명도를 조정하는 예

CSS3 불투명도 구현을 위한 전체 코드