当前位置：首页 > news >正文

CSS颜色

news 2026/7/5 15:40:21

背景色和文字色反差：背景色和文字颜色一样被遮挡

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference/Properties/mix-blend-mode

mix-blend-mode 完整详解 + 全套代码示例

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.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 class="img-wrap"> <!-- 底层图片 --> <img class="bg-img" src="https://picsum.photos/id/1036/600/400" alt="风景图"> <!-- 居中文字 --> <div class="center-text">唯美风景</div> </div> </body> </html>

mix-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：排除，柔和版 difference

4. 色相色彩组（只改色调 / 饱和度，不破坏明暗）

hue：保留下层明暗饱和度，只用上层色相
saturation：保留下层明暗色相，只用上层饱和度
color：保留下层明暗，上层色相 + 饱和度
luminosity：保留下层色相饱和度，上层明暗

三、通用演示模板（所有模式可切换测试）

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>mix-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 class="wrap"> <!-- 上层粉色遮罩，和底层图片混合 --> <div class="overlay"></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 class="text-box"> <div class="text">混合文字</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 class="img-wrap"> <img src="https://picsum.photos/id/22/350/500" alt="风景"> <div class="filter-dark"></div> </div>

screen 高光清新滤镜

.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 class="container"> <div class="box"></div> </div>

不加isolation时，红色块会和页面黑色背景一起混合；加上后只和父容器蓝色混合。

示例 4：background-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 class="bg-demo"></div>

示例 5：色相模式做单色图片（黑白图上色）

只用上层颜色的色相，保留原图明暗，快速给黑白照片上色html

<style> .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 class="photo-box"> <img src="https://picsum.photos/id/40/350/480" alt="黑白图"> <div class="color-layer"></div> </div>

示例 6：difference 反色 hover 交互

鼠标悬浮时文字和背景反转颜色，无需 JS

<style> .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 class="hover-demo"> <div class="hover-text">Hover 反色</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