invert 함수

함수 invert를 사용하면 배경 이미지의 색상을 반전시킬 수 있습니다. 값 0은 이미지가 원본 그대로 유지됨을 의미합니다. 값 100% 또는 1는 배경 색상을 완전히 반전시킵니다. 해당 범위 내의 어떤 숫자도 색상을 부분적으로 반전시킵니다. 음수 값은 설정할 수 없습니다. 기본값은 0입니다.

구문

선택자 {
	filter: invert(숫자);
}

예제

이미지 색상을 50% 값만큼 반전시켜 보겠습니다:

<div id="elem"></div>

#elem {
	filter: invert(50%);
	background: url("bg.png") center / cover no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

예제

이번에는 이미지 색상을 100% 값만큼 완전히 반전시켜 보겠습니다:

<div id="elem"></div>

#elem {
	filter: invert(100%);
	background: url("bg.png") center / cover no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

예제

이제 함수 invert에 0 값을 설정해 보겠습니다:

<div id="elem"></div>

#elem {
	filter: invert(0);
	background: url("bg.png") center / cover no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

같이 보기

배경을 흐리게 만드는 함수 blur
배경의 밝기를 설정하는 함수 brightness
배경의 대비를 설정하는 함수 contrast
배경에 그림자를 설정하는 함수 drop-shadow
배경의 색조를 설정하는 함수 hue-rotate
배경의 투명도를 설정하는 함수 opacity
배경을 세피아로 변환하는 함수 sepia
배경에 대한 단축 속성인 background
블록에 배경 이미지를 설정할 수 있는 속성 background-image
배경에 스타일을 설정하는 속성 filter