opacity
CSS 속성은 요소의 불투명도를 설정합니다. 불투명도는 요소 뒤쪽 콘텐츠가 숨겨지는 정도로, 투명도의 반대입니다.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
opacity
는 요소의 내용을 포함해 모든 곳에 영향을 주지만 자식 요소가 상속하지는 않습니다. 따라서 요소와 자식의 투명도가 서로 다르더라도 배경에 대해서는 상대적으로 같은 투명도를 갖습니다.
opacity
값이 1
이 아니면 요소를 새로운 쌓임 맥락에 배치합니다.
자식 요소는 불투명하게 유지하고 싶다면 background
속성을 대신 사용하세요.
background: rgba(0, 0, 0, 0.4);
구문
값
<number>
0.0
이상,1.0
이하의 불투명도를 나타내는 수(알파채널의 값). 범위 밖의 숫자는 구문 상 유효하지만, 실제 적용 시에는 범위에 들어가도록 잘라냅니다.값 뜻 0
요소가 완전히 투명해 보이지 않음. 0
과1
사이의 아무<number>
요소가 반투명해 뒤의 내용을 볼 수 있음. 1
(기본값)요소가 불투명함.
형식 구문
<alpha-value>where
<alpha-value> = <number> | <percentage>
예제
기본 예제
div { background-color: yellow; } .light { opacity: 0.2; /* 배경 위로 겨우 볼 수 있음 */ } .medium { opacity: 0.5; /* 배경 위로 조금 더 잘 보임 */ } .heavy { opacity: 0.9; /* 배경 위로 뚜렷하게 보임 */ }
<div class="light">겨우 보이는 글</div> <div class="medium">좀 더 잘 보이는 글</div> <div class="heavy">쉽게 보이는 글</div>
:hover
시 다른 불투명도 적용
img.opacity { opacity: 1; } img.opacity:hover { opacity: 0.5; filter: alpha(opacity=50); zoom: 1; }
<img src="//developer.mozilla.org/media/img/mdn-logo.png" alt="MDN logo" width="128" height="146" class="opacity">
접근성 고려사항
글씨의 투명도를 조절했다면, 낮은 시력을 가진 사용자도 페이지의 콘텐츠를 읽을 수 있도록 글자 색과 배경색의 대비를 높게 유지하는 것이 중요합니다.
색 대비율은 배경색과 투명도를 적용한 글자 색의 밝기를 비교해서 얻어낼 수 있습니다. 현재 웹 콘텐츠 접근성 가이드라인(WCAG)을 만족하려면, 텍스트 콘텐츠는 4.5:1, 제목 등 큰 텍스트는 3:1의 대비율이 필요합니다. 큰 텍스트란 18.66px 이상의 굵은 글씨 혹은 24px 이상의 텍스트로 정의하고 있습니다.
- WebAIM: Color Contrast Checker
- MDN Understanding WCAG, Guideline 1.4 explanations
- Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0
명세
Specification | Status | Comment |
---|---|---|
CSS Transitions The definition of 'opacity' in that specification. |
Working Draft | Defines opacity as animatable. |
CSS Color Module Level 3 The definition of 'opacity' in that specification. |
Recommendation | Initial definition |
초기값 | 1.0 |
---|---|
적용대상 | all elements |
상속 | no |
Media | visual |
Computed value | the specified value, clipped in the range [0,1] |
Animation type | a number |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
브라우저 호환성
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
opacity | Chrome Full support 1 | Edge Full support 12 | Firefox
Full support
1
| IE Full support 9 | Opera Full support 9 | Safari
Full support
2
| WebView Android Full support 1 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support 10.1 | Safari iOS Full support 1 | Samsung Internet Android Full support Yes |
Support for percentage opacity values | Chrome Full support 78 | Edge No support No | Firefox Full support 70 | IE No support No | Opera No support No | Safari No support No | WebView Android Full support 78 | Chrome Android Full support 78 | Firefox Android No support No | Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No |
Legend
- Full support
- Full support
- No support
- No support
- Requires a vendor prefix or different name for use.
- Requires a vendor prefix or different name for use.