어제 오늘 내일

[HTML/CSS] 이미지 색상 반전 시키기 - invert() 본문

IT/HTML&CSS

[HTML/CSS] 이미지 색상 반전 시키기 - invert()

hi.anna 2022. 8. 3. 06:45

 

CSS에서는 

filter 속성을 사용하여

포토샵 등의 이미지 편집 도구를 사용하지 않고

간단한 그래픽 효과를 줄 수 있습니다.

 

filter: invert(amount)

filter: invert(100%);

filter 속성에 적용할 수 있는 여러 가지 함수 중

invert() 함수는

이미지의 색상을 반전시킵니다.

파라미터로 입력받는 amount는

반전의 정도를 나타내는데,

퍼센트(%) 또는 0~1까지의 숫자로 표현할 수 있습니다.

100%는 완벽한 반전, 0%는 반전이 없는 원본 상태입니다.

 

  예제  

my_invert.html

<!DOCTYPE html>
<html>
 
<head>
    <title>이미지</title>
    <link rel="stylesheet" href="css/my_invert.css" />
</head>
 
<body>
    <div class="my_div">
        <img src="./img/puppy.jpg">
        <p>원본</p>
    </div>
    <div>
        <img src="./img/puppy.jpg" class="invert_img_1">
        <p>invert(0)</p>
    </div>
    <div>
        <img src="./img/puppy.jpg" class="invert_img_2">
        <p>invert(50%)</p>
    </div>
    <div>
        <img src="./img/puppy.jpg" class="invert_img_3">
        <p>invert(100%)</p>
    </div>
</body>
 
</html>

 

my_invert.css

.invert_img_1 {
    filter: invert(0);
}
 
.invert_img_2 {
    filter: invert(50%);
}
 
.invert_img_3 {
    filter: invert(100%);
}
 
div {
    width: 300px;
    float: left;
    border: 1px solid;
}

 

결과

 

 

 

 

반응형

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

[HTML/CSS] 배경색 그라데이션 넣기 (linear-gradient())  (0) 2022.08.05
[HTML/CSS] 이미지 모서리 둥글게, 동그란 프로필 이미지 만들기 ( border-radius)  (0) 2022.08.04
[HTML/CSS] 이미지 흑백으로 변환하기 - grayscale()  (0) 2022.08.02
[HTML/CSS] 텍스트에 마우스 오버시 이미지 보이기  (0) 2022.08.01
[HTML/CSS] 마우스 오버시 이미지 어둡게 하기 (천천히)  (0) 2022.07.31
공유하기 링크
'IT/HTML&CSS' Related Articles more
Comments