어제 오늘 내일

[HTML/CSS] 이미지 투명도 지정하기 (opacity) 본문

IT/HTML&CSS

[HTML/CSS] 이미지 투명도 지정하기 (opacity)

hi.anna 2022. 7. 29. 06:50

 

이미지 투명도 지정하기

이미지의 투명도를 조절하기 위해서는

CSS의 opacity 속성을 사용합니다.

 

 

opacity

opacity는 불투명도라는 뜻입니다.

따라서 opcity는 대상 객체가 얼마나 불투명한지를 나타냅니다.

 

  허용값  

  • 0.0 ~ 1.0 
  • 0% ~ 100%

숫자가 클수록 불투명하고, 숫자가 작을 수록 투명합니다.

 

 

  opacity 예제  

my_image.html

<!DOCTYPE html>
<html>

<head>
    <title>이미지</title>
    <link rel="stylesheet" href="css/my_image.css" />
</head>

<body>
    <div>
        <img src="./img/night.jpg" class="my_img1">
        <p>opacity 1.0</p>
    </div>
    <div>
        <img src="./img/night.jpg" class="my_img2">
        <p>opacity 0.5</p>
    </div>
    <div>
        <img src="./img/night.jpg" class="my_img3">
        <p>opacity 0.0</p>
    </div>
</body>

</html>

 

my_image.css

div {
    width: 300px;
    float: left;
    border: 1px solid;
}

img {
    width: 300px;
}

.my_img1 {
    opacity: 1.0;
}

.my_img2 {
    opacity: 0.5;
}

.my_img3 {
    opacity: 0.0;
}

 

결과

 

opacity를 1, 0.5, 0으로 적용한 예제입니다.

숫자가 클수록 불투명합니다.

opacity 값이 0인 경우는 투명해서 아예 보이지 않고 있습니다.

 

 

 

 

반응형

'IT > HTML&CSS' 카테고리의 다른 글

[HTML/CSS] 마우스 오버시 이미지 어둡게 하기 (천천히)  (0) 2022.07.31
[HTML/CSS] 이미지 어둡게 하는 3가지 방법 (brightness, background-color, linear-gradient)  (0) 2022.07.30
[HTML/CSS] 대소문자 변환, 첫글자만 대문자로 바꾸기 (text-transform)  (0) 2022.07.27
[HTML/CSS] ::before, ::after 가상 요소(Pseudo-elements)  (0) 2022.07.26
[html] 책갈피 기능 만들기 (페이지 내 이동)  (0) 2022.07.25
공유하기 링크
'IT/HTML&CSS' Related Articles more
Comments