CSS颜色

背景色和文字色反差背景色和文字颜色一样被遮挡https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference/Properties/mix-blend-modemix-blend-mode 完整详解 全套代码示例!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title图片居中文字混合模式/title style * { margin: 0; padding: 0; box-sizing: border-box; } /* 图片父容器相对定位承载绝对文字 */ .img-wrap { width: 600px; margin: 50px auto; position: relative; /* 隔离混合防止和页面背景混合干扰文字 */ isolation: isolate; overflow: hidden; border-radius: 12px; } /* 图片铺满容器 */ .bg-img { width: 100%; height: auto; display: block; } /* 绝对定位文字完全居中 */ .center-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 60px; font-weight: 900; /* 文字底色固定白色配合difference自动反色 */ color: #ffffff; /* 核心混合模式自动根据图片底色切换黑白文字 */ mix-blend-mode: difference; letter-spacing: 4px; } /style /head body div classimg-wrap !-- 底层图片 -- img classbg-img srchttps://picsum.photos/id/1036/600/400 alt风景图 !-- 居中文字 -- div classcenter-text唯美风景/div /div /body /htmlmix-blend-mode 全部取值分类说明CSS 标准一共 16 个混合模式分为 4 大类附带作用与使用场景一、基础混合组最常用normal默认值不做任何混合上层直接覆盖下层和普通元素叠加一致。mix-blend-mode: normal;multiply正片叠底 两层颜色相乘画面变暗白色会完全透明消失适合复古胶片、暗调滤镜。screen滤色 颜色取反相乘画面变亮黑色完全消失适合双重曝光、清新亮调图片。overlay叠加 结合 multiply screen亮部更亮、暗部更暗提升对比度万能调色叠加。二、对比度调节组darken对比两层像素只保留更暗的像素亮部直接舍弃。lighten对比两层像素只保留更亮的像素暗部直接舍弃。color-dodge颜色减淡 大幅提亮下层画面高光容易过曝适合梦幻柔光效果。color-burn颜色加深 大幅压暗画面加重阴影复古暗黑色调。hard-light强光 高对比度版 overlay明暗反差极强适合炫酷视觉海报。soft-light柔光 柔和版 overlay轻微增强对比渐变叠加最舒服不会刺眼。三、差值反转组反色、创意视觉difference差值 上下层颜色做差值运算亮色区域自动反色适合反色文字、赛博朋克特效。exclusion排除 柔和版 difference对比更低画面不会过于刺眼。四、色彩模式组只改色调保留原图明暗只改变色彩信息原图光影、明暗完全保留适合图片上色、统一色调。 13.hue色相 只使用上层颜色的色相保留下层饱和度与明度黑白图上色首选。 14.saturation饱和度 只使用上层饱和度保留下层色相、明暗。 15.color颜色 使用上层色相 饱和度保留下层明度整体统一图片色调。 16.luminosity明度 只使用上层明暗亮度保留下层原本的色彩。完整书写列表可直接复制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;补充区分 background-blend-mode这 16 个值同时也适用于background-blend-mode区别mix-blend-mode当前元素 和下方 DOM 图层混合background-blend-mode元素内部多张背景图 / 背景色互相混合不影响外部元素。一、基础概念1. 作用mix-blend-mode控制当前元素和下层所有像素的颜色混合规则类似 PS 图层混合模式。混合双方上层应用mix-blend-mode的元素前景层下层该元素下方所有图层背景、图片、文字、其他 DOM生效前提元素不能完全透明且下层存在可见内容。2. 补充两个配套属性background-blend-mode仅控制当前元素内部多张背景图 / 背景色之间混合不与页面下层混合。isolation: isolate隔离混合范围只在父容器内部混合不会穿透到父容器外背景。二、全部取值分类CSS 标准 16 种1. 基础通用组normal默认不混合上层直接覆盖下层multiply正片叠底颜色变暗白色完全透明screen滤色颜色变亮黑色完全透明overlay叠加亮部更亮、暗部更暗2. 对比度组darken取两层像素更暗的值lighten取两层像素更亮的值color-dodge颜色减淡大幅提亮color-burn颜色加深大幅压暗hard-light强光soft-light柔光3. 差值反转组difference差值亮区反色exclusion排除柔和版 difference4. 色相色彩组只改色调 / 饱和度不破坏明暗hue保留下层明暗饱和度只用上层色相saturation保留下层明暗色相只用上层饱和度color保留下层明暗上层色相 饱和度luminosity保留下层色相饱和度上层明暗三、通用演示模板所有模式可切换测试!DOCTYPE html html langzh-CN head meta charsetUTF-8 titlemix-blend-mode 通用Demo/title style .wrap { width: 400px; height: 300px; margin: 30px auto; position: relative; background: url(https://picsum.photos/id/10/400/300) center/cover; } .overlay { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(255, 60, 120, 0.6); /* 修改这里切换混合模式 */ mix-blend-mode: overlay; } /style /head body div classwrap !-- 上层粉色遮罩和底层图片混合 -- div classoverlay/div /div /body /html修改mix-blend-mode的值即可实时看不同效果。四、分场景实战示例示例 1文字融合背景图片文字变色艺术字最常用需求文字跟随背景图色彩自动融合实现镂空 / 融合文字效果style .text-box { width: 500px; height: 200px; background: linear-gradient(45deg, #2563eb, #f43f5e); display: grid; place-items: center; } .text { font-size: 80px; font-weight: 900; color: #fff; mix-blend-mode: difference; } /style div classtext-box div classtext混合文字/div /div效果白色文字和渐变背景差值反转高对比炫酷标题。示例 2图片叠加纯色滤镜复古胶片、ins 滤镜multiply 暗调胶片滤镜style .img-wrap { width: 350px; position: relative; } .img-wrap img { width: 100%; display: block; } .filter-dark { position: absolute; inset: 0; background: #7a400080; mix-blend-mode: multiply; } /style div classimg-wrap img srchttps://picsum.photos/id/22/350/500 alt风景 div classfilter-dark/div /divscreen 高光清新滤镜.filter-bright { position: absolute; inset: 0; background: #fff7cc77; mix-blend-mode: screen; }示例 3隔离混合 isolation: isolate问题混合会穿透父容器和页面 body 背景混合isolation: isolate限制只在父容器内混合。style body { background: #000; /* 页面黑色背景 */ } .container { width: 300px; height: 300px; background: #2266cc; isolation: isolate; /* 隔离边界 */ } .box { width: 100%; height: 100%; background: #ff4466; mix-blend-mode: difference; } /style div classcontainer div classbox/div /div不加isolation时红色块会和页面黑色背景一起混合加上后只和父容器蓝色混合。示例 4background-blend-mode元素内部多背景混合不穿透下层区分mix-blend-mode是元素与下层 DOM 混合background-blend-mode只混合自身多张背景。style .bg-demo { width: 400px; height: 300px; background: linear-gradient(#ff3366, #ffdd00), url(https://picsum.photos/id/30/400/300) center/cover; background-blend-mode: overlay; } /style div classbg-demo/div示例 5色相模式做单色图片黑白图上色只用上层颜色的色相保留原图明暗快速给黑白照片上色htmlstyle .photo-box { width: 350px; position: relative; } .photo-box img { width: 100%; filter: grayscale(100%); /* 转黑白 */ } .color-layer { position: absolute; inset: 0; background: #3b82f6; mix-blend-mode: hue; } /style div classphoto-box img srchttps://picsum.photos/id/40/350/480 alt黑白图 div classcolor-layer/div /div示例 6difference 反色 hover 交互鼠标悬浮时文字和背景反转颜色无需 JSstyle .hover-demo { width: 300px; height: 120px; background: #111; display: grid; place-items: center; cursor: pointer; } .hover-text { font-size: 40px; color: #fff; transition: 0.3s; } .hover-demo:hover .hover-text { mix-blend-mode: difference; } /style div classhover-demo div classhover-textHover 反色/div /div五、关键特性与坑点层级限制只会和下层元素混合不会和上层元素混合DOM 顺序越靠后层级越高。透明度影响上层完全不透明时opacity:1、无透明 rgba部分模式效果减弱带透明度混合更柔和。不生效常见原因下层无任何背景 / 图片空白白色页面看不到混合元素层级最高下方没有 DOM父容器设置isolation: isolate隔离了混合范围浏览器兼容问题现代浏览器全支持IE 完全不支持。性能提醒大量使用混合模式长列表、动画会提升 GPU 绘制开销复杂页面尽量少用。六、常用模式效果速查表属性效果场景normal默认无混合multiply暗调滤镜、胶片、压暗画面screen清新高光、提亮图片overlay通用叠加增强对比difference反色文字、hover 特效、炫酷标题hue黑白照片上色保留明暗color统一图片色调darken / lighten只保留更暗 / 更亮像素CSS 里直接取RGB 补色白色 ↔ 黑色、红色 ↔ 青色主要有两种方案filter: invert()整体反转和CSS 相对颜色rgb(from ...)精确计算单个颜色。一、filter: invert(100%)—— 整体视觉反转最常用作用对元素所有颜色做RGB 通道反转255 - R, 255 - G, 255 - B直接得到视觉补色。白 ↔ 黑红 ↔ 青绿 ↔ 品红蓝 ↔ 黄所有颜色同步反转语法/* 完全反转100% 补色 */ .补色 { filter: invert(100%); /* 或简写 invert(1) */ } /* 部分反转 */ .半反转 { filter: invert(50%); /* 变灰 */ }特点✅ 兼容性极好Chrome、Firefox、Safari、Edge 全支持✅ 一行搞定作用于整个元素文字、背景、边框、图片全反转❌ 不能只单独改某一个颜色变量会影响整个元素❌ 带透明 / 图片时可能出现色偏二、rgb(from ...)—— CSS 相对颜色精确计算单个补色现代 CSS 新特性从一个基色用公式计算出新颜色。补色公式calc(1 - r) calc(1 - g) calc(1 - b)语法:root { --主色: #ff0000; /* 红 */ /* 计算补色#00ffff青 */ --补色: rgb(from var(--主色) calc(1 - r) calc(1 - g) calc(1 - b)); } .box { background: var(--主色); color: var(--补色); }特点✅ 精确、只改单个颜色变量不影响整个元素✅ 纯 CSS 颜色计算无副作用⚠️ 较新特性Chrome 111、Firefox 113、Safari 16.5⚠️ 不支持 IE 和旧浏览器三、HSL 色相 180° 旋转色相反补色如果你要的是色轮上对面的颜色HSL 补色css:root { --主色: hsl(30, 100%, 50%); /* 橙 */ --补色: hsl(from var(--主色) calc(h 180) s l); }效果红 ↔ 青、绿 ↔ 品红、蓝 ↔ 黄和 RGB 反转一致区别invert()同时反转明暗hue-rotate 180deg只转色相MDN Web Docs四、对比总结你该用哪个表格方案作用范围兼容性适合场景filter: invert(100%)整个元素✅ 极高暗黑模式、图标反色、整体换肤rgb(from ... 1-r 1-g 1-b)单个颜色变量⚠️ 现代浏览器动态主题、变量级补色hue-rotate(180deg)仅色相✅ 高只转色相、保留亮度MDN Web Docs五、一句话记住要整个元素反色白变黑、红变青→filter: invert(100%)要单个 CSS 变量取补色→rgb(from var(--c) calc(1 - r) ...)两者效果一致invert(100%) RGB 通道255 - x 视觉补色