CSS CSS blend mode로 이미지·배경 합성하기 (multiply, screen 등)
페이지 정보
조회 159회
작성일 22-04-27 13:18
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的属性，两个东西有差别
- 이전글문장의 span에 예쁘게 백그라운드(형광펜) 넣기 23.10.23
- 다음글유튜브 영상을 웹페이지 배경으로 사용하는 CSS 기법 20.04.29