어제 오늘 내일

[HTML/CSS] 이미지 흑백으로 변환하기 - grayscale() 본문

IT/HTML&CSS

[HTML/CSS] 이미지 흑백으로 변환하기 - grayscale()

hi.anna 2022. 8. 2. 06:16

 

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

CSS를 사용해서 

이미지를 흑백으로 보이게 할 수 있습니다.

 

filter란

CSS에서 filter 속성을 사용하면

이미지 색상 변화나 흐림 처리 등 간단한 이미지 변경 처리를 할 수 있습니다.

 

  filter 함수  

  • blur()
  • brightness()
  • contrast()
  • drop-shadow()
  • grayscale()
  • hue-rotate()
  • invert()
  • opacity()
  • saturate()
  • sepia()

이 중 grayscale() 함수를 사용하면

컬러 이미지를 흑백으로 변환할 수 있습니다.

 

 

filter : grayscale(amount)

grayscale() 함수는

이미지를 흑백으로 변환하는 함수입니다.

파라미터로 들어가는 amount는 흑백으로 전환하는 비율입니다.

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

  • grayscale(100%) - 흑백
  • grayscale(1) - 흑백
  • grayscale(0%) - 원본
  • grayscale(0) - 원본

 

  예제  

my_grayscale.html

<!DOCTYPE html>
<html>
 
<head>
    <title>이미지</title>
    <link rel="stylesheet" href="css/my_grayscale.css" />
</head>
 
<body>
    <div class="my_div">
        <img src="./img/puppy.jpg">
        <p>원본</p>
    </div>
    <div>
        <img src="./img/puppy.jpg" class="grayscale_img_1">
        <p>grayscale(0)</p>
    </div>
    <div>
        <img src="./img/puppy.jpg" class="grayscale_img_2">
        <p>grayscale(50%)</p>
    </div>
    <div>
        <img src="./img/puppy.jpg" class="grayscale_img_3">
        <p>grayscale(100%)</p>
    </div>
</body>
 
</html>

 

my_grayscale.css

.grayscale_img_1 {
    filter: grayscale(0);
}
 
.grayscale_img_2 {
    filter: grayscale(50%);
}
 
.grayscale_img_3 {
    filter: grayscale(100%);
}
 
div {
    width: 300px;
    float: left;
    border: 1px solid;
}

 

결과

 

 

반응형

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

[HTML/CSS] 이미지 모서리 둥글게, 동그란 프로필 이미지 만들기 ( border-radius)  (0) 2022.08.04
[HTML/CSS] 이미지 색상 반전 시키기 - invert()  (0) 2022.08.03
[HTML/CSS] 텍스트에 마우스 오버시 이미지 보이기  (0) 2022.08.01
[HTML/CSS] 마우스 오버시 이미지 어둡게 하기 (천천히)  (0) 2022.07.31
[HTML/CSS] 이미지 어둡게 하는 3가지 방법 (brightness, background-color, linear-gradient)  (0) 2022.07.30
공유하기 링크
'IT/HTML&CSS' Related Articles more
Comments