배경에 따라 글자 색이 자동으로 변하는 텍스트 효과
배경 이미지에 따라 글자 색이 자동으로 적응하는 효과를 CSS로 구현한 CodePen 예제다. mix-blend-mode와 background-clip을 활용해 밝은 배경과 어두운 배경 모두에서 글자가 또렷하게 보이도록 하며, 배경 위에 겹쳐진 텍스트의 가독성을 높이는 기법이다.
See the Pen Untitled by H J (@H-J-the-typescripter) on CodePen.
스크립트 & 소스코드 공유
실무에서 유용하게 쓰는 스크립트와 코드 조각을 블로그 게시판으로 저장하고 공유합니다.
총 2건의 글
CSS blend mode로 이미지·배경 합성하기 (multiply, screen 등)
CSS 的 mix-blend-mode 与 background-blend-mode 实现图片与背景合成的方法。整理了 multiply(正片叠底)、screen(滤色)、overlay(叠加)、darken、lighten、difference、hue、saturation 等全部混合模式，并说明 mix-blend-mode 作用于 img 元素、background-blend-mode 作用于 div 背景，两者使用场景不同。
mix-blend-mode: normal; //正常
mix-blend-mode: multiply; //正片叠底
mix-blend-mode: screen; //滤色
mix-blend-mode: overlay; //叠加
mix-blend-mode: darken; //变暗
mix-blend-mode: lighten; //变亮
mix-blend-mode: color-dodge; //颜色减淡
mix-blend-mode: color-burn; //颜色加深
mix-blend-mode: hard-light; //强光
mix-blend-mode: soft-light; //柔光
mix-blend-mode: difference; //差值
mix-blend-mode: exclusion; //排除
mix-blend-mode: hue; //色相
mix-blend-mode: saturation; //饱和度
mix-blend-mode: color; //颜色
mix-blend-mode: luminosity; //亮度
mix-blend-mode: initial; //初始
mix-blend-mode: inherit; //继承
mix-blend-mode: unset; //复原
这里就是div自己的背景图片和自己的背景颜色混合了，实现了正片叠低。注意只有一个元素div，这个div有背景图片和背景颜色。
background-blend-mode: multiply;是div属性，mix-blend-mode: multiply; 是img的属性，两个东西有差别
Let's create something great together.
프로젝트 문의 및 견적 요청은 언제든 환영합니다.