[特殊字符] CSS 图片变黑变暗的 3 种方案，总有一款适合你！-编程实验室

最近在做项目的时候，遇到一个很常见的需求：如何让图片颜色更黑一点，或者加一层黑色透明度遮罩？
很多人第一反应是用filter: brightness(0%)，但其实这个方法有不少坑。今天就来聊聊3 种靠谱的 CSS 方案，从简单到高级，看完你就知道该选哪个了！

🤔 为什么需要让图片变暗？

在实际开发中，这种需求非常常见：

场景	需求
🖼️ 图片上放白色文字	图片太亮看不清字，需要压暗背景
🌙 暗色主题网站	整体风格偏暗，图片需要配合
🎭 悬停效果	hover 时图片变暗，突出交互感
📸 海报/Banner	叠加黑色渐变，营造氛围感

🎯 方案一：使用`filter`（最简单，一行代码搞定）

这是最直接的方式，不需要改动 HTML 结构，直接在img标签上加样式就行。

img{filter:brightness(0.7);}

📌 参数说明

参数	含义	效果
`brightness(1)`	原始亮度	不变
`brightness(0.7)`	70% 亮度	变暗 30% ✅
`brightness(0.5)`	50% 亮度	变暗 50%
`brightness(0)`	0% 亮度	纯黑 ⚫
`brightness(1.5)`	150% 亮度	变亮 50% ☀️

🔥 进阶：组合使用效果更好

img{filter:brightness(0.7)contrast(1.1)saturate(0.9);}

滤镜	作用
`brightness(0.7)`	降低亮度
`contrast(1.1)`	提升对比度，让暗部更暗
`saturate(0.9)`	稍微降低饱和度，避免颜色过艳

✅ 优点

✅ 代码最少，一行搞定
✅ 不需要改 HTML 结构
✅ 性能好，GPU 加速

❌ 缺点

❌ 会影响整个图片，包括白色区域也会变灰
❌ 无法精确控制"只让透明区域变黑"
❌ 不够灵活，想调整透明度比较麻烦

🎯 方案二：伪元素叠加黑色半透明层（⭐ 最推荐）

这是我最推荐的方案！通过::after伪元素叠加一层黑色半透明遮罩，精确控制、不影响原图、灵活度最高。

📝 HTML 结构

<divclass="img-wrapper"><imgsrc="photo.jpg"alt=""></div>

🎨 CSS 样式

.img-wrapper{position:relative;display:inline-block;}.img-wrapper::after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.3);/* 黑色 + 30% 透明度 */pointer-events:none;/* 🔑 关键！不影响图片点击事件 */}

📌 参数调节指南

透明度	效果	适用场景
`rgba(0,0,0,0.1)`	微微变暗 🌑	轻微压暗，保留细节
`rgba(0,0,0,0.3)`	明显变暗 🌘	文字叠加，最常用 ✅
`rgba(0,0,0,0.5)`	大幅变暗 🌗	悬停效果
`rgba(0,0,0,0.8)`	接近全黑 🌑	强烈氛围感

✅ 优点

✅精确控制透明度，想要多少暗就多少暗
✅不影响原图，随时可以去掉
✅pointer-events: none保证不影响点击交互
✅ 兼容所有浏览器，没有兼容性问题

❌ 缺点

❌ 需要在img外面包一层div
❌ 代码比filter多几行

🎯 方案三：混合模式（效果最自然 ✨）

如果你追求最自然的变暗效果，可以试试mix-blend-mode混合模式。

🎨 CSS 样式

.img-wrapper{position:relative;display:inline-block;}.img-wrapper::after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:black;mix-blend-mode:multiply;/* 🔑 正片叠底模式 */opacity:0.3;/* 30% 透明度 */pointer-events:none;}

📌 常见混合模式对比

混合模式	效果	推荐度
`multiply`（正片叠底）	✅ 变暗，保留细节，最自然	⭐⭐⭐⭐⭐
`screen`（滤色）	变亮，反过来用	⭐⭐⭐
`overlay`（叠加）	同时变亮和变暗	⭐⭐⭐⭐
`darken`（变暗）	只取暗色部分	⭐⭐⭐

✅ 优点

✅ 效果最自然，像专业 PS 调过一样
✅ 亮的地方不变，只有暗的地方更暗
✅ 视觉上比filter更高级

❌ 缺点

❌ 兼容性稍差（IE 不支持）
❌ 不如方案二直观好理解

📊 三种方案终极对比

对比项	方案1：`filter`	方案2：伪元素叠加 ⭐	方案3：混合模式
代码量	⭐ 最少	⭐⭐ 中等	⭐⭐ 中等
灵活度	⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐
效果自然度	⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐
浏览器兼容	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐
是否需要改HTML	❌ 不需要	✅ 需要包一层div	✅ 需要包一层div
推荐场景	快速 demo	生产环境首选✅	追求极致效果

🏆 最终推荐

你的需求	推荐方案
快速实现，不想改结构	👉 方案1`filter`
生产环境，追求稳定	👉方案2 伪元素叠加⭐
追求极致视觉效果	👉 方案3 混合模式