---
title: opacity
slug: Web/CSS/opacity
tags:
  - CSS
  - CSS Property
  - Reference
  - 색
translation_of: Web/CSS/opacity
---
<div>{{CSSRef}}</div>

<p><span class="seoSummary"><strong><code>opacity</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> 속성은 요소의 불투명도를 설정합니다.</span> 불투명도는 요소 뒤쪽 콘텐츠가 숨겨지는 정도로, 투명도의 반대입니다.</p>

<div>{{EmbedInteractiveExample("pages/css/opacity.html")}}</div>



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

<p><code>opacity</code> 값이 <code>1</code>이 아니면 요소를 새로운 <a href="/ko/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">쌓임 맥락</a>에 배치합니다.</p>

<p>자식 요소는 불투명하게 유지하고 싶다면 {{cssxref("background")}} 속성을 대신 사용하세요.</p>

<pre class="brush:css">background: rgba(0, 0, 0, 0.4);</pre>

<h2 id="구문">구문</h2>

<h3 id="값">값</h3>

<dl>
 <dt><code>&lt;alpha-value&gt;</code></dt>
 <dd>채널의 불투명도(알파 채널의 값)를 나타내는 <code>0.0</code> 이상 <code>1.0</code> 이하의 {{cssxref("number")}}, 또는 0% 이상 100% 이하의 {{cssxref("percentage")}}. 범위 밖의 숫자는 구문 상 유효하지만, 실제 적용 시에는 범위에 맞춰 나머지 값은 버려집니다.
 <table class="standard-table">
  <tbody>
   <tr>
    <th>값</th>
    <th>뜻</th>
   </tr>
   <tr>
    <td><code>0</code></td>
    <td>요소가 완전히 투명해 보이지 않음.</td>
   </tr>
   <tr>
    <td><code>0</code>과 <code>1</code> 사이의 아무 <code>&lt;number&gt;</code></td>
    <td>요소가 반투명해 뒤의 내용을 볼 수 있음.</td>
   </tr>
   <tr>
    <td><code>1</code> (기본값)</td>
    <td>요소가 불투명함.</td>
   </tr>
  </tbody>
 </table>
 </dd>
</dl>

<h3 id="형식_구문">형식 구문</h3>

{{csssyntax}}

<h2 id="예제">예제</h2>

<h3 id="기본_예제">기본 예제</h3>

<pre class="brush: css">div { background-color: yellow; }
.light {
  opacity: 0.2; /* 배경 위로 겨우 볼 수 있음 */
}
.medium {
  opacity: 0.5; /* 배경 위로 조금 더 잘 보임 */
}
.heavy {
  opacity: 0.9; /* 배경 위로 뚜렷하게 보임 */
}
</pre>

<pre class="brush: html">&lt;div class="light"&gt;겨우 보이는 글&lt;/div&gt;
&lt;div class="medium"&gt;좀 더 잘 보이는 글&lt;/div&gt;
&lt;div class="heavy"&gt;쉽게 보이는 글&lt;/div&gt;
</pre>

<p>{{EmbedLiveSample('기본_예제', '640', '64')}}</p>

<h3 id="hover_시_다른_불투명도_적용"><code>:hover</code> 시 다른 불투명도 적용</h3>

<pre class="brush: css">img.opacity {
  opacity: 1;
}

img.opacity:hover {
  opacity: 0.5;
  filter: alpha(opacity=50);
  zoom: 1;
}</pre>

<pre class="brush: html">&lt;img src="//developer.mozilla.org/static/img/opengraph-logo.png"
  alt="MDN logo" width="128" height="146"
  class="opacity"&gt;</pre>

<p>{{EmbedLiveSample('hover_시_다른_불투명도_적용', '150', '175')}}</p>

<h2 id="접근성_고려사항">접근성 고려사항</h2>

<p>글씨의 투명도를 조절했다면, 낮은 시력을 가진 사용자도 페이지의 콘텐츠를 읽을 수 있도록 글자 색과 배경색의 대비를 높게 유지하는 것이 중요합니다.</p>

<p>색 대비율은 배경색과 투명도를 적용한 글자 색의 밝기를 비교해서 얻어낼 수 있습니다. 현재 <a href="https://www.w3.org/WAI/standards-guidelines/wcag/">웹 콘텐츠 접근성 가이드라인</a>(WCAG)을 만족하려면, 텍스트 콘텐츠는 4.5:1, 제목 등 큰 텍스트는 3:1의 대비율이 필요합니다. 큰 텍스트란 18.66px 이상의 <a href="/ko/docs/Web/CSS/font-weight">굵은</a> 글씨 혹은 24px 이상의 텍스트로 정의하고 있습니다.</p>

<ul>
 <li><a href="https://webaim.org/resources/contrastchecker/">WebAIM: Color Contrast Checker</a></li>
 <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li>
 <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li>
</ul>

<h2 id="명세">명세</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'opacity')}}</td>
   <td>{{Spec2('CSS3 Transitions')}}</td>
   <td>Defines <code>opacity</code> as animatable.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Colors', '#opacity', 'opacity')}}</td>
   <td>{{Spec2('CSS3 Colors')}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<p>{{cssinfo}}</p>

<h2 id="브라우저_호환성">브라우저 호환성</h2>



<p>{{Compat("css.properties.opacity", 2)}}</p>