컴

CSS 불투명도 / 투명성

· 2017-06-05 (월) 17:16:07 · 2542

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
|
댓글을 작성하시려면 로그인이 필요합니다.

퍼블리셔팁

1,282건

퍼블리싱과 관련된 유용한 정보를 공유하세요. 질문은 상단의 QA에서 해주시기 바랍니다.

+
분류 제목 글쓴이 날짜 조회
CSS 17-07-18 조회 2,452
CSS 17-07-18 조회 2,527
CSS 17-06-13 조회 3,998
CSS 17-06-13 조회 3,353
CSS 17-06-13 조회 2,589
CSS 17-06-08 조회 2,079
CSS 17-06-08 조회 2,510
CSS 17-06-08 조회 1,997
CSS 17-06-06 조회 5,707
CSS 17-06-05 조회 3,657
CSS 17-06-05 조회 3,465
CSS 17-06-05 조회 2,543
HTML 17-06-02 조회 3,517
HTML 17-05-26 조회 3,953
CSS 17-05-05 조회 2,846
CSS 17-05-05 조회 2,333
CSS 17-05-05 조회 2,103
CSS 17-05-04 조회 3,092
CSS 17-05-04 조회 2,989
CSS 17-05-04 조회 3,491
CSS 17-04-10 조회 2,182
CSS 17-04-10 조회 1,868
CSS 17-04-10 조회 2,634
CSS 17-04-05 조회 2,284
CSS 17-04-05 조회 2,561
CSS 17-04-05 조회 2,557
CSS 17-04-04 조회 2,442
CSS 17-04-04 조회 2,610
CSS 17-04-04 조회 2,707
CSS 17-03-13 조회 3,278