CSS - filter: brightnes를 이용한 이미지 어둡게 또는 밝게 하는 방법

See the Pen filter: brightness by nilgi (@nilgi) on CodePen.

 

 

CSS로 이미지 밝기를 조절하는 방법은 다양합니다. 아마 백그라운드 색을 opacity 하는걸 가장 많이 사용할 것 같습니다.

그것보다 조금 더 편한 방법은 filter: brightnes를 사용하면 됩니다.

 

filter: brightnes(50%); // 어둡게

filter: brightnes(100%); // 원본

filter: brightnes(150%); // 밝게

 

% 단위를 써도 되고 opacity처럼 숫자 1을 기준으로 써도 됩니다.