sepia 함수

sepia 함수는 배경 이미지를 갈색 톤의 흑백 이미지인 세피아로 만들 수 있게 합니다. 0 값은 이미지가 원본 그대로 유지됨을 의미합니다. 100% 또는 1 값은 배경을 완전히 세피아로 변환합니다. 이 범위 내의 어떤 숫자도 세피아 효과를 선형적으로 적용합니다. 음수 값은 설정할 수 없습니다. 기본값은 0입니다.

구문

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

예제

우리 이미지를 완전한 세피아로 만들어 봅시다:

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

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

예제

이제 세피아 적용 정도를 50%로 낮춰봅시다:

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

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

예제

이제 sepia 함수에 0 값을 설정해 봅시다:

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

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

함께 보기

blur 함수,
배경을 흐리게 합니다
brightness 함수,
배경의 밝기를 설정합니다
contrast 함수,
배경의 대비를 설정합니다
drop-shadow 함수,
배경에 그림자를 설정합니다
hue-rotate 함수,
배경의 색조를 설정합니다
invert 함수,
배경 색상을 반전시킵니다
opacity 함수,
배경의 투명도를 설정합니다
background 속성,
배경에 대한 단축 속성입니다
background-image 속성,
블록에 배경 이미지를 설정하는 데 사용합니다
filter 속성,
배경에 스타일을 설정합니다