CSS에서 이미지 색상을 변경하는 방법

filter 속성에서 opacity() 및 drop-shadow() 함수를 결합하면 CSS에서 이미지의 색상이 변경됩니다. Filter 속성은 반사, 회색조, 세피아, 그림자 등과 같은 다양한 효과를 이미지에 적용하는 데 사용할 수 있습니다. 이 함수는 다른 색상 구성 요소를 사용하여 이미지의 색상을 수정합니다. 이 매뉴얼에서는 CSS를 사용하여 이미지의 색상을 변경하는 방법에 대한 지식을 습득합니다.

이 기사의 결과는 다음과 같습니다.

필터 속성
그림자()
불투명()

시작하자!

CSS에서 이미지 색상 변경

CSS에서 이미지의 색상을 변경하려면 먼저 필터 속성과 해당 기능에 대해 알아보세요. 이렇게 하면 더 나은 이해를 얻을 수 있습니다.

필터 CSS 속성

CSS의 이미지 필터 속성을 사용하여 시각적 효과를 제어합니다. 시각 효과는 다음과 같습니다.

흐림
명도
색상 조정
그림자
불투명

필터 속성의 구문

필터 속성의 구문은 다음과 같습니다.

필터 : 흐림 ( ) | 그림자 ( ) | 불투명 ( )

흐림(): 이미지에 흐림 효과를 적용하는 데 사용됩니다.
그림자(): 이미지 위에 그림자를 만듭니다.
불투명(): 이미지에 투명도를 추가하는 데 사용됩니다.

이 필터 속성을 사용하여 여러 필터를 사용할 수 있습니다. 이 글은 이미지의 색상을 변경하는 방법에 관한 것이므로 여기서는 drop-shadow() 및 opacity() 함수를 함께 사용하는 방법에 대해 설명합니다.

그림자()

drop-shadow()는 모든 요소 또는 이미지에 그림자를 설정할 수 있는 CSS의 내장 함수입니다. 다음 매개변수는 이미지의 색상을 변경하기 위해 drop-shadow() 함수에서 사용됩니다.

오프셋-x: 수평 그림자를 추가하는 데 사용됩니다.
오프셋-y: 그림자는 이것을 사용하여 수직으로 추가됩니다.
색깔: 그림자는 이 매개변수로 채색됩니다.

이러한 점을 명확히 하기 위해 drop-shadow 구문으로 이동하겠습니다.

그림자 ( 오프셋-x 오프셋-y 색상 )

offset-x 및 offset-y는 양수 또는 음수일 수 있습니다.
수평에서는 양수 값을 사용하여 오른쪽에 효과를 추가하고 음수 값을 왼쪽에 추가합니다.
세로에서 양수 값은 아래쪽이고 음수 값은 위쪽입니다.
색상 대신 이미지에 부여할 색상을 지정할 수 있습니다.

불투명()

opacity()는 요소 또는 이미지에 투명도를 추가하는 데 사용됩니다. opacity()의 구문은 다음과 같습니다.

불투명 ( 숫자 ) ;

여기 ' 숫자 ' 나 s는 0.0에서 1.0 사이의 불투명도 수준을 설정하는 데 사용됩니다. 이미지를 완전히 투명하게 만들려면 0.0으로 설정할 수 있습니다.

위의 언급 사항을 명확히하기 위해 예제로 이동하겠습니다.