HTML5中无原生rainbow滤镜，所谓“彩虹效果”需通过CSS分层合成（如mask+conic-gradient）、hue-rotate动画或Canvas像素级控制实现，核心在于映射逻辑而非滤镜本身。
HTML5 中没有原生的 rainbow 滤镜
别被“HTML5滤镜”这个词带偏了——filter CSS 属性本身不提供彩虹渐变效果，grayscale()、blur()、hue-rotate() 这些是标准函数，但没有 rainbow() 或 gradient-filter()。所谓“彩虹滤镜”，本质是用其他技术模拟出来的视觉效果。
用 background-image + mask 或 clip-path 叠加渐变
最可控、兼容性较好的做法：把目标元素（比如一张图或一段文字）当作“遮罩层”，上面盖一层彩虹渐变背景，再用 mask 或 clip-path 限定显示区域。关键不是滤镜，而是分层合成。
常见组合方式：
-
mask-image: linear-gradient(...)配合mask-size和mask-repeat控制彩虹条纹密度 - 用
background: conic-gradient(red, orange, yellow, green, blue, indigo, violet)做基础彩虹色盘，再通过background-clip: text+-webkit-text-fill-color: transparent实现文字彩虹效果 - 对图片使用
clip-path: inset(0)并配合background渐变，需注意background-blend-mode可能影响颜色表现
hue-rotate() 动画容易看起来像彩虹，但不是真渐变
有人用 @keyframes 不停调 filter: hue-rotate(0deg) → hue-rotate(360deg)，让整个元素颜色循环滚动。这确实有“流动彩虹感”，但它是全局色相位移，无法形成空间上的红→紫线性/环形分布，且对灰度内容无效。
立即学习“前端免费学习笔记（深入）”；
要注意的坑：
Canvas 绘制才是最灵活的“彩虹滤镜”实现方式
如果需要逐像素控制（比如给图像每个区域映射不同彩虹相位），必须上 。用 getImageData() 读像素，按坐标或亮度映射到 conic-gradient 的色环角度，再写回 putImageData()。
典型流程：
- 加载图片到
，调用ctx.drawImage() - 用
ctx.getImageData(0, 0, w, h)获取像素数组 - 遍历每个像素，根据其位置
(x, y)或灰度值计算目标色相h = (x + y * 0.5) % 360 - 转成 RGB 写入新
ImageData，最后ctx.putImageData()
这种做法完全绕过 CSS 渲染管线，自由度高，但没法用纯 CSS 替代，也丧失了响应式缩放优势。
真正难的不是怎么加彩虹，而是决定彩虹该“依附于什么”：是按空间坐标？按图像明度？还是随鼠标移动？选错映射逻辑，效果就只是乱闪，不是滤镜。
