CSS / opacity / 요소를 투명하게 만드는 속성
개요
opacity로 요소의 투명도를 정할 수 있습니다.
- 기본값 : 1
- 상속 : No
- 애니메이션 : Yes
- 버전 : CSS Level 3
문법
|
1 |
opacity: number | initial | inherit |
- number : 0.0부터 1.0까지의 수를 넣습니다.
- initial : 기본값으로 설정합니다.
- inherit : 부모 요소의 속성값을 상속받습니다.
숫자가 작을수록 투명해집니다.
예제
|
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 |
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS Reference | opacity</title> <style> .a { width: 600px; padding: 50px 0px; border: 1px solid #212121; background-color: #212121; text-align: center; color: #ffffff; } .b { position: fixed; top: 100px; left: 100px; width: 600px; padding: 50px 0px; border: 1px solid #ff9800; background-color: #ff9800; text-align: center; color: #ffffff; opacity: 0.7; } </style> </head> <body> <div class="a"> <h1>Lorem Ipsum Dolor.</h1> </div> <div class="b"> <h1>Lorem Ipsum Dolor.</h1> </div> </body> </html> |
브라우저 지원
- Chrome : 4.0+
- Firefox : 2.0+
- Internet Explorer : 9.0+
- Opera : 9.0+
- Safari : 3.1+