CSS로 흑백이미지 만들기

아시다시피(?) 이 웹사이트의 디자인 컨셉은 “종이 신문”입니다. 그 느낌을 살리기 위해, 글의 본문 이미지들을 제외한 외부에 노출되어 있는 이미지들은 모두 흑백처리가 되어있는데, 바로 이 효과를 만드는 방법을 알려드릴게요.

물론, 우리의 그지같은 인터넷 익스플로러와 MS 계열의 브라우저에는 이 효과가 먹지를 않기 때문에 현재 익스플로러로 이 글을 읽고 있는 분이라면 ‘이게 뭔 말이야’ 하실지도 몰라요.

See the Pen Image Luminosity by 1 Minute Coding(1분코딩) (@1mincoding) on CodePen.

이미지를 감싸고 있는 요소에 배경색을 세팅해주고,
이미지에는 mix-blend-mode: luminosity; 를 설정해주면 끝!

mix-blend-mode는 “적용된 요소가 background 및 부모 요소와 어떻게 혼합되어야 하는지”를 값으로 지정해주는 속성입니다.

mix-blend-mode 속성에 대한 자세한 정보는 이 링크[새창]를 참조하세요.
브라우저 지원 확인[새창]