colofilter.css核心技术详解luminosity、hue、hard-light等mix-blend-mode混合模式完全解析【免费下载链接】colofilter.cssColofilter.css - Duotone filters made with CSS !项目地址: https://gitcode.com/gh_mirrors/co/colofilter.csscolofilter.css是一个用纯 CSS 实现双色调Duotone滤镜效果的开源项目无需 Photoshop只需给图片加上mix-blend-mode混合模式就能一键把照片变成红、蓝、黄、粉等 27 种电影感双色调风格灵感来自 Spotify 2015 年那波刷屏的品牌视觉。下面带你完全搞懂它背后的核心技术。双色调滤镜的核心原理两层叠加colofilter.css 的魔法只来自两个 CSS 属性mix-blend-mode混合模式和filter滤镜函数。它的思路是三层叠加图片层先把原图变成灰度图颜色层用::after伪元素铺一层纯色或渐变背景混合层让颜色层和灰度图按特定混合模式化学反应。图中展示 colofilter.css 支持的全部滤镜7 种单色 × 3 档明暗 3 组渐变色每种都标注了对应的类名如.blend-blue-dark逐个解析关键混合模式1. luminosity亮度模式把图片榨干成灰度在 styles/colofilter.scss 中所有[class^blend]容器的图片都默认应用img { mix-blend-mode: luminosity; }luminosity是理解整个项目的钥匙它只保留颜色的明度亮度丢弃色相和饱和度。也就是说不管原图是蓝天还是绿草叠上任何颜色后都会变成一张对比强烈的黑白照片——这正是双色调的单色底。 项目演示页里还额外用filter: grayscale(100%) contrast(1.2)增强灰度质感见 styles/main.scss。2. hue色相模式给灰度图注入颜色颜色层默认使用hue混合模式并搭配对比度滤镜:after { content: ; width: 100%; height: 100%; filter: contrast(1.3); mix-blend-mode: hue; }hue模式只取颜色层的色调色相亮度则继承自下层灰度图。于是你看到的蓝色滤镜其实是灰度图的明暗 蓝色的色调。这就是为什么不同颜色的滤镜下照片的明暗细节几乎完全一致。 各颜色值定义在 styles/colofilter.scss 的$color-map变量表中如red: #E50914、blue: #0066BF改一张表就能定制整组滤镜。3. hard-light强光模式加强色彩冲击力并非所有颜色都用hue。部分滤镜改用hard-light强光叠加效果更浓更冲// 蓝色滤镜非 dark/light 档 :not([class*-dark]):not([class*-light]) { :after { mix-blend-mode: hard-light; filter: brightness(0.6); } }hard-light根据下层明度决定是变暗还是变亮暗部更暗、亮部更亮对比被放大。所以blend-red用hard-lightcontrast(0.6) brightness(1.2)得到浓郁暖调而blend-blue压暗到brightness(0.6)呈现出深邃的赛博感。 完整的逐色配方见 styles/colofilter.scss每一种颜色都是混合模式 滤镜参数手工调校过的组合。dark / light 变体混合模式的明暗开关同一颜色还提供-dark和-light两档核心技巧是把两层的混合模式对调变体图片层img颜色层::after默认luminosityhue/hard-light等-darkdarken变暗lighten提亮-lightlighten变亮darken压暗[class*-dark] { img { mix-blend-mode: darken; } :after { mix-blend-mode: lighten !important; } } [class*-light] { img { mix-blend-mode: lighten; } :after { mix-blend-mode: darken !important; } }这就是 styles/colofilter.scss 里-dark/-light的通用规则——用darken/lighten两个互补模式控制明暗走向再叠加特殊配方blend-red-lightcolor-dodgesaturate(400%)得到极亮的荧光红blend-yellow-darkcolor-dodgehue-rotate(70deg)偏金的复古调blend-purple-light超高saturate(520%) brightness(10.5)梦幻淡紫。另外 3 组双色系blue-yellow、pink-yellow、red-blue不用单色背景而是直接铺linear-gradient渐变再配合hard-light/screen等模式做出从上到下的双色渐变双色调。三步上手 colofilter.css第一步把 styles/colofilter.css 引入页面headlink hrefpath/to/colofilter.css relstylesheet第二步给包含图片的容器加上滤镜类名命名规则是blend-颜色可选加-dark/-light后缀div classblend-blue img srcyour-photo.jpg alt示例照片 spanlorem/span /div第三步换类名即换风格blend-red-dark、blend-yellow-light、blend-pink-yellow等 27 个组合随意切换。需要本地完整体验的话可以克隆仓库git clone https://gitcode.com/gh_mirrors/co/colofilter.css然后打开 index.html点击任意图片即可复制对应类名由 scripts/main.js 配合 scripts/clipboard.min.js 实现。浏览器兼容性与使用建议⚠️注意hue、saturation、color、luminosity这几个模式目前 IE、Edge、Opera Mini 完全不支持Safari桌面与 iOS也缺失支持详见 index.html 中的兼容性说明Chrome、Firefox 等现代浏览器均可正常使用。图片必须是块级、100% 宽度铺满容器overflow: hidden伪元素才能完美覆盖。想作用于background-image时需改用透明占位元素 混合模式方案思路一致。双色调适合品牌视觉、Banner、作品集等强风格化场景日常照片慎用color-dodge配方高光容易过曝。总结colofilter.css 用一个极简架构演示了 mix-blend-mode 的全部精髓luminosity负责去色保留明度hue负责上色只取色相hard-light、color-dodge、soft-light负责风格微调darken/lighten对调控制明暗档位filtercontrast、brightness、saturate、hue-rotate则是最后的调料。读懂 styles/colofilter.scss 不到 300 行的源码你就能掌握一套可以举一反三的纯 CSS 图片调色方法论——下次做双色调 Banner不用再打开修图软件了。【免费下载链接】colofilter.cssColofilter.css - Duotone filters made with CSS !项目地址: https://gitcode.com/gh_mirrors/co/colofilter.css创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考