본문 바로가기
front-end/css

CSS 믹스 블렌드 모드

by Dreaming Coder 2021. 1. 10. 14:43

 


이 포스팅은 PC로 작성되었습니다.

모바일로 보시는 분들에게는 가끔

줄 바꿈이 어색하게 보일 수 있습니다.

 


 

 

 

지난 포스트

 

CSS 블렌드 모드

이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS 이미지나 폰트에 필터 적용하기 이 포스팅은 PC로 작성되었습니다.

gogogameboy.tistory.com

지난 포스트에서는 블렌드 모드 중에서도 background-blend-mode를 공부했습니다.

이번에 공부할 블렌드 모드는 mix-blend-mode입니다.

 

 

 

 

 

 

 

mix-blend-mode

 

위의 소스 코드는 PC에서 드래그 후,
ctrl+x로 잘라내서 다른 곳으로 붙여넣기가 가능합니다.
ctrl+c(복사)는 불가능합니다.

 

 

 

지난 포스트에서 공부한 background-blend-mode는 배경 이미지와 배경색을 섞는 블렌드 모드였고,

지금 공부하는 mix-blend-mode는 배경 이미지와 엘리먼트를 혼합하는 블렌드 모드입니다.

넣을 수 있는 값에는 마찬가지로 color, color-burn, color-dodge, darken, screen, difference, exclusion, hard-light, hue 등 다양하게 있습니다.

 

 

 

 

 

 

다음 포스트

 

CSS 트랜스폼

이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS 믹스 블렌드 모드 이 포스팅은 PC로 작성되었습니다. 모바일로 보시

gogogameboy.tistory.com

 

 

 


이 글이 도움이 됐다면 하단의 공감 버튼을 꾹 눌러서
빨간 하트로 만들어주세요.
지인에게 보여주고 싶은 글이었다면
공감 버튼 옆을 클릭해서 SNS 공유해주세요.
댓글은 블로그 운영에 큰 힘이 됩니다.

 


 

'front-end > css' 카테고리의 다른 글

CSS 트랜스폼 중심축 바꾸기  (0) 2021.01.12
CSS 트랜스폼  (0) 2021.01.11
CSS 블렌드 모드  (0) 2021.01.10
CSS 이미지나 폰트에 필터 적용하기  (0) 2021.01.09
CSS 배경 색과 이미지  (0) 2021.01.08

댓글