brightness 함수

brightness 함수는 배경 이미지의 밝기를 변경할 수 있습니다. 배경의 원래 밝기는 값 100% 또는 1로 결정되며, 이 값을 낮추면 이미지 밝기도 낮아집니다. 반대로 값을 100% 이상으로 증가시키면 밝기가 높아집니다. 음수 값은 적용되지 않으며, 빈 값은 자동으로 1로 인식됩니다.

문법

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

예제

우리 이미지의 밝기를 20%로 설정해 보겠습니다:

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

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

예제

이제 이미지 밝기를 120%로 높여 보겠습니다:

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

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

예제

우리 이미지에 원래 밝기를 설정해 보겠습니다:

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

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

함께 보기

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