opacity

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이 아니면 요소를 새로운 쌓임 맥락에 배치합니다.

If you do not want to apply opacity to child elements, use the background property instead. For example:

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

구문

값

<number>

A <number> in the range 0.0 to 1.0, inclusive, representing the opacity of the channel (that is, the value of its alpha channel). Any value outside the interval, though valid, is clamped to the nearest limit in the range.

Value	Meaning
0	The element is fully transparent (that is, invisible).
Any <number> strictly between 0 and 1	The element is translucent (that is, content behind the element can be seen).
1 (default value)	The element is fully opaque (visually solid).

형식 구문

<number>

예제

기본 예제

div { background-color: yellow; }
.light {
  opacity: 0.2; /* Barely see the text over the background */
}
.medium {
  opacity: 0.5; /* See the text more clearly over the background */
}
.heavy {
  opacity: 0.9; /* See the text very clearly over the background */
}

<div class="light">You can barely see this.</div>
<div class="medium">This is easier to see.</div>
<div class="heavy">This is very easy to see.</div>

:hover 시 다른 투명도 적용

img.opacity {
  opacity: 1;
  filter: alpha(opacity=100); /* IE8 and lower */
  zoom: 1; /* Triggers "hasLayout" in IE 7 and lower */
}
 
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">

접근성 고려사항

If text opacity is adjusted, it is important to ensure that the contrast ratio between the color of the text and the background the text is placed over is high enough that people experiencing low vision conditions will be able to read the content of the page.

Color contrast ratio is determined by comparing the luminosity of the opacity-adjusted text and background color values. In order to meet current Web Content Accessibility Guidelines (WCAG), a ratio of 4.5:1 is required for text content and 3:1 for larger text such as headings. Large text is defined as 18.66px and bold or larger, or 24px or larger.

• WebAIM: Color Contrast Checker
• MDN Understanding WCAG, Guideline 1.4 explanations
• Understanding Success Criterion 1.4.3  | W3C Understanding WCAG 2.0

명세

브라우저 호환성

같이 보기

• Microsoft's filter:alpha(opacity=xx)