CSS에서 이미지 색상 변경

1. filter 속성을 사용하여 CSS에서 이미지 색상 변경
2. filter 속성의 opacity() 및 drop-shadow() 함수를 사용하여 CSS의 이미지 색상 변경

이 기사에서는 CSS에서 이미지 색상을 변경하는 몇 가지 방법을 소개합니다.

filter 속성을 사용하여 CSS에서 이미지 색상 변경

filter 속성은 CSS에서 이미지의 오버레이를 설정합니다.

filter 속성을 사용하여 이미지에 시각적 및 그래픽 효과를 적용할 수 있습니다. 예를 들어 filter 속성을 사용하여 이미지를 흐리게 하고, 대비 및 밝기를 변경하고, 그림자 효과, 채도, 회색조 및 불투명도를 적용할 수 있습니다.

filter 속성을 사용하여 이미지에 적용할 수 있는 다양한 옵션이 있습니다. filter 속성의 구문은 다음과 같습니다.

filter: none | brightness() | greyscale () | contrast () | opacity () | saturate ();

% 값을 사용하여 위의 옵션을 설정할 수 있습니다. 값이 낮을수록 이미지에 덜 영향을 미치며 그 반대의 경우도 마찬가지입니다.

백분율 값 대신 소수 값을 사용할 수도 있습니다. 예를 들어 80%에 대해 0.8을 쓸 수 있습니다.

이제 다양한 필터의 예를 살펴보겠습니다.

예를 들어, img 태그를 사용하여 URL https://loremflickr.com/320/240이 있는 이미지를 6번 삽입하고 brightness, blur, saturate, grayscale, contrast 클래스를 img 태그로 설정합니다. CSS에서 img 태그를 선택하고 width를 25%로, float 속성을 left로 설정합니다.

다음으로 brightness 클래스를 선택하고 filter 속성을 사용하여 밝기를 1.25로 설정합니다. 마찬가지로, 해당 클래스를 선택하고 blur를 2px로, saturate를 300%로, grayscale을 200%로, contrast를 클래스에 따라 60%로 설정합니다.

여기서 첫 번째 이미지는 원본 이미지이고 나머지는 필터를 포함합니다. 따라서 filter 속성을 사용하여 CSS에서 이미지 색상을 변경할 수 있습니다.

예제 코드:

<img src="/img/DelftStack/logo.png" />
<img class="brightness" src="/img/DelftStack/logo.png" />
<img class="blur" src="/img/DelftStack/logo.png" />
<img class="saturate" src="/img/DelftStack/logo.png" />
<img class="grayscale" src="/img/DelftStack/logo.png" />
<img class="contrast" src="/img/DelftStack/logo.png" />

img {
 width:25%;
 float:left;  
}

.brightness { filter: brightness(1.25); }
.blur { filter: blur(2px); }
.saturate { filter: saturate(300%); }
.grayscale { filter: grayscale(200%); }
.contrast { filter: contrast(60%); }

filter 속성의 opacity() 및 drop-shadow() 함수를 사용하여 CSS의 이미지 색상 변경

filter 속성에서 opacity() 및 drop-shadow() 기능을 결합하여 CSS에서 이미지 색상을 변경할 수 있습니다. 우리는 drop-shadow 기능에서 그림자의 색상을 제공할 수 있으며 실제 그림자를 형성하지 않고 이미지의 색상만 변경되도록 그림자를 최대한 얇게 설정할 수 있습니다.

불투명도는 그림에 더 눈에 띄는 색상을 제공합니다. drop-shadow 기능을 사용하여 수평 그림자, 수직 그림자, 흐림 반경, 확산 값 및 색상을 지정할 수 있습니다.

예를 들어 HTML 이미지를 삽입하고 CSS에서 img 태그를 선택한 다음 filter 속성을 적용합니다. filter 속성에서 opacity를 0.4로 설정합니다. 다음으로 drop-shadow 기능의 매개변수로 0 0 0 red 값을 설정합니다.

여기에서 수평 및 수직 그림자에 대해 값 0을 설정합니다. 결과적으로 그림자는 이미지 바로 뒤에 있습니다.

흐림 효과의 0 값도 이미지를 가장자리에서 더 선명하게 만듭니다. 그러나 red 색상이 그림자에 적용되고 이미지가 붉어집니다.

이런 식으로 filter 속성의 opacity() 및 drop-shadow() 함수를 결합하여 CSS에서 이미지 색상을 변경할 수 있습니다.

예제 코드:

<img src="/img/DelftStack/logo.png" />

img{
filter: opacity(0.4) drop-shadow(0 0 0 red); 
}