IT/css

CSS opacity 불투명도 / 투명성

조원태 2017. 6. 5. 17:17
반응형

CSS 불투명도 / 투명성


이 opacity속성은 요소의 불투명도 / 투명도를 지정합니다.


투명한 이미지

이 opacity속성은 0.0 - 1.0의 값을 가질 수 있습니다. 값이 낮을수록 투명합니다.


숲

불투명도 0.2

숲

불투명도 0.5

숲

불투명도 1 


참고 : IE8 및 이전 버전이 사용 filter:alpha(opacity=x)됩니다. x는 0 - 100의 값을 취할 수 있습니다. 값이 낮을수록 요소가 더 투명 해집니다.


img {

    opacity: 0.5;

    filter: alpha(opacity=50); /* For IE8 and earlier */

}



<!DOCTYPE html>

<html>

<head>

<style>

img {

    opacity: 0.5;

    filter: alpha(opacity=50); /* For IE8 and earlier */

}

</style>

</head>

<body>


<h1>Image Transparency</h1>

<p>The opacity property specifies the transparency of an element. The lower the value, the more transparent:</p>


<p>Image with 50% opacity:</p>

<img src="img_forest.jpg" alt="Forest" width="170" height="100">


</body>

</html>


Image Transparency

The opacity property specifies the transparency of an element. The lower the value, the more transparent:

Image with 50% opacity:

Forest


반응형

'IT > css' 카테고리의 다른 글

css Navigation Bars  (0) 2017.06.08
CSS opacity 투명한 호버 효과  (0) 2017.06.05
CSS 레이아웃 - position: relative; 속성  (0) 2017.03.13
css max-width and margin: auto;  (0) 2017.03.13
php ftp_site - 서버에 SITE 명령을 보냅니다.  (0) 2017.02.25