opacity

opacity CSS 속성은 요소의 불투명도를 설정합니다. 불투명도는 요소 뒤쪽 콘텐츠가 숨겨지는 정도로, 투명도의 반대입니다.

opacity는 요소의 내용을 포함해 모든 곳에 영향을 주지만 자식 요소가 상속하지는 않습니다. 따라서 요소와 자식의 투명도가 서로 다르더라도 배경에 대해서는 상대적으로 같은 투명도를 갖습니다.

opacity 값이 1이 아니면 요소를 새로운 쌓임 맥락에 배치합니다.

자식 요소는 불투명하게 유지하고 싶다면 background 속성을 대신 사용하세요.

background: rgba(0, 0, 0, 0.4);

구문

<number>
0.0 이상, 1.0 이하의 불투명도를 나타내는 수(알파채널의 값). 범위 밖의 숫자는 구문 상 유효하지만, 실제 적용 시에는 범위에 들어가도록 잘라냅니다.
0 요소가 완전히 투명해 보이지 않음.
01 사이의 아무 <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 이상의 텍스트로 정의하고 있습니다.

명세

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
Mediavisual
Computed valuethe specified value, clipped in the range [0,1]
Animation typea number
Canonical orderthe unique non-ambiguous order defined by the formal grammar

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
opacityChrome Full support 1Edge Full support 12Firefox Full support 1
Full support 1
No support 1 — 3.5
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
IE Full support 9Opera Full support 9Safari Full support 2
Full support 2
No support 1.1 — 2
Prefixed
Prefixed Implemented with the vendor prefix: -khtml-
WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support Yes
Support for percentage opacity valuesChrome Full support 78Edge No support NoFirefox Full support 70IE No support NoOpera No support NoSafari No support NoWebView Android Full support 78Chrome Android Full support 78Firefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung 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.