c25. CSS 이미지 투명도 조절하기

CSS 이미지 투명도 조절하기

이미지의 투명도

Opacity 는 불투명도 이고, Transparency 는 투명도를 말합니다.

CSS 에서 이미지의 투명도를 지정하는 것은 쉽습니다.

CSS 불투명도 속성 (CSS opacity property) 은 CSS3 에서 권장하는 방식 이기도 합니다.

즉, CSS3 에서는 투명도 (transparency) 를 표현할 때 대해 opacity (불투명도) 를 사용합니다. 아래 opacity: 0.5; 에서 수치가 1에 가까울 수록 진하게 보입니다.

위에 두번째 그림이 CSS 를 사용하여 투명하게 한 그림입니다..
<style>
img.opac {
opacity: 0.5;
filter: alpha(opacity=50); /* IE8 및 그 이하 버전용 */
}

img.opac:hover {
opacity: 1.0;
filter: alpha(opacity=100); /* IE8 및 그 이하 버전용 */
}
</style>
<h1>이미지의 투명도</h1>
<img src="https://upload.wikimedia.org/wikipedia/commons/9/94/Starry_Night_Over_the_Rhone.jpg" width="304" height="203" alt="Starry_Night_Over_the_Rhone.">

<img class="opac" src="https://upload.wikimedia.org/wikipedia/commons/9/94/Starry_Night_Over_the_Rhone.jpg" width="304" height="203" alt="Starry_Night_Over_the_Rhone.">

opacity property (불투명도 속성) 은 0.0 에서 1.0 의 값을 가질 수 있는데, 낮은 값이면 더 투명 (transparent) 하게 됩니다.

IE8 및 그 이전 버전에서는 filter:alpha(opacity=50) 과 같이 사용하는데 값을 0 에서 100 까지 % 단위로 입력합니다. 이 역시 낮은 값일 수록 더 투명하게 됩니다.

---

Hover 효과를 이용하여, 마우스를 올렸을 때만 진하게 보이게 할 수 있습니다.
img.opac:hover {
opacity: 1.0;
filter: alpha(opacity=100); /* IE8 및 그 이하 버전용 */
}
.opac 클래스를 갖는 img 태그들에, 마우스가 올라가면(:hover), 불투명도를 1.0 으로하여 이미지가 진하게 보이도록 하였습니다.

---

[광고] Udemy 동영상 강의로 보기