HTML5 中怎么使用 CSS 渐变实现图片的双色调滤镜-H5教程-PHP中文网

html5中无法用css渐变实现真正双色调，但可通过css filter组合或svg fecolormatrix精准实现：前者轻量易用，后者支持灰度映射与通道控制，配合mix-blend-mode还可用于文字填充与图层叠加。

html5 中怎么使用 css 渐变实现图片的双色调滤镜

HTML5 中不能直接用 CSS 渐变（linear-gradient 或 radial-gradient）实现真正的双色调（duotone）滤镜——渐变本身是背景色过渡，不是图像色彩映射。但可以结合 CSS filter 与 SVG <fecolormatrix></fecolormatrix> 实现可靠、可控的双色调效果，且完全兼容 HTML5 环境。

用 CSS filter 模拟双色调（轻量、易上手）

适合快速出效果，不依赖外部资源：

核心思路：用 grayscale() + hue-rotate() + saturate() 组合逼近双色调感，例如偏青橙或蓝紫调
必须显式声明 transition: filter 0.4s ease 才有平滑过渡，否则无动画
避免写 filter: grayscale(1) sepia(1) —— 浏览器不支持跨函数插值，会导致跳变
推荐参数组合（起点黑白 → 终点双色调倾向）：
filter: grayscale(1) contrast(1.2);
filter: grayscale(0.1) hue-rotate(210deg) saturate(1.7) brightness(0.96);
加 will-change: filter 提升悬停性能，尤其在 Safari 和旧版 Chrome 中

用 SVG feColorMatrix 实现精准双色调（推荐用于生产）

这是真正意义上的双色调：把图像灰度值映射到两个指定颜色，支持通道级控制：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

在 HTML 中内联一个 <svg><defs><filter id="duotone">...</filter></defs></svg>
使用 <fecolormatrix type="matrix" values="..."></fecolormatrix>，按 RGBA 输出公式配置矩阵
典型双色调矩阵（黑→深蓝，白→浅橙）示例：
```
0.2 0.2 0.2 0 0<br>
  0.2 0.2 0.2 0 0<br>
  0.2 0.2 0.2 0 0<br>
  0   0   0   1 0
```
再叠加 <fecomponenttransfer></fecomponenttransfer> 调整亮度分界点，让过渡更柔和
应用方式：img { filter: url(#duotone); }，无需 JS，纯 HTML5/CSS/SVG
优势：可复用、可动画、不触发重排、支持 print 媒体

配合 background-image 的文字/图层双色调技巧

若想让图片作为文字填充并带双色调感，可用混合模式增强表现力：

先用 background-image 设置图，再用 background-clip: text + -webkit-text-fill-color: transparent 把图“填进字里”
给文字容器加一层纯色背景（如深蓝），再设 mix-blend-mode: multiply，让图片区域自然呈现双色调倾向
或对图片本身加 filter: grayscale(1) contrast(1.3)，再用 mix-blend-mode: overlay 叠在渐变背景上，视觉上强化双色层次
注意：mix-blend-mode 需要堆叠上下文（如设置 position: relative 或 isolation: isolate）才能生效