opacity는 HTML 구성요소의 불투명도를 지정하는 css 속성이다.
버전 : CSS3를 지원하는 모든 브라우저에서 사용 가능(일부 브라우저 낮은 버전에서는 verder prefix 필요)
용법 : opacity: n; n=0~1(값이 낮을수록 불투명도가 낮아짐, 즉 투명도가 높아짐. 소숫점 사용 가능, 예 0.1=10%)
1. opacity 예제
(기본값 opacity: 1)
(opacity: 0.5)
2. opacity 미지원 브라우저에서 사용
* 지원여부 확인 : http://caniuse.com/css-opacity
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
/* opacity = CSS3 투명도 지정 속성 범위는 0~1.0(지원 IE9이상, Firefix2.0이상, Chrome4.0이상, Opera9.0이상 */ /* http://caniuse.com/css-opacity 참조 */ opacity: 0.7; /* Firefox 이전 버전에서 투명도 지정 */ -moz-opacity: 0.7; /* Safari 이전 버전에서 투명도 지정 */ -khtml-opacity: 0.7; /* MS Internet Explorer 8,9에서 투명도 지정. 반드시 filter보다 앞에 와야 함. 범위는 0~100 */ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; /* MS Internet Explorer 4,5,6,7에서 투명도 지정. 8,9도 filter 지원하나 브라우저 모드에 따라 지원하지 않을 수 있으므로 추가함 */ filter: alpha(opacity=70); |
3. 예제
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Fade In/Out Samples</title> <style type="text/css"> .op-100 { /* 별도로 지정할 필요 없음(기본값=1, 즉 100%) */} .op-80 { /* opacity = CSS3 투명도 지정 속성 범위는 0~1.0(지원 IE9이상, Firefix2.0이상, Chrome4.0이상, Opera9.0이상 */ /* http://caniuse.com/css-opacity 참조 */ opacity: 0.8; /* Firefox 이전 버전에서 투명도 지정 */ -moz-opacity: 0.8; /* Safari 이전 버전에서 투명도 지정 */ -khtml-opacity: 0.7; /* MS Internet Explorer 8,9에서 투명도 지정. 반드시 filter보다 앞에 와야 함. 범위는 0~100 */ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; /* MS Internet Explorer 4,5,6,7에서 투명도 지정. 8,9도 filter 지원하나 브라우저 모드에 따라 지원하지 않을 수 있으므로 추가함 */ filter: alpha(opacity=80); } .op-60 { opacity: 0.6; -moz-opacity: 0.6; -khtml-opacity: 0.6; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; filter: alpha(opacity=60); } .op-40 { opacity: 0.4; -moz-opacity: 0.4; -khtml-opacity: 0.4; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; filter: alpha(opacity=40); } .op-20 { opacity: 0.2; -moz-opacity: 0.2; -khtml-opacity: 0.2; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)"; filter: alpha(opacity=20); } .op-10 { opacity: 0.1; -moz-opacity: 0.1; -khtml-opacity: 0.1; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=10)"; filter: alpha(opacity=10); } </style> </head> <body> <div> <img class="op-100" src="http://static.webdeveloperskorea.com/images/samples/image1.jpg" width="150" height="113" alt="image" /> <img class="op-80" src="http://static.webdeveloperskorea.com/images/samples/image1.jpg" width="150" height="113" alt="image" /> <img class="op-60" src="http://static.webdeveloperskorea.com/images/samples/image1.jpg" width="150" height="113" alt="image" /> <img class="op-40" src="http://static.webdeveloperskorea.com/images/samples/image1.jpg" width="150" height="113" alt="image" /> <img class="op-20" src="http://static.webdeveloperskorea.com/images/samples/image1.jpg" width="150" height="113" alt="image" /> <img class="op-10" src="http://static.webdeveloperskorea.com/images/samples/image1.jpg" width="150" height="113" alt="image" /> </div> </body> </html> |
[코드실행결과]
4. 직접 실행해보기
http://jsfiddle.net/asimryu/HbtKn/
by seung lyul ryu
최종수정 : 2014.02.23
Share the joy