html5如何实现图片渐变遮罩_html5渐变遮罩教程【技巧】

• 渐变方向写成 to bottom（从上到下渐隐）比 0deg 更易读，也更符合常见设计意图
• RGBA 值里 alpha 通道必须明确设为小数（如 0.7），不能写 70%，否则渐变会失效
• 如果图片是响应式（width: 100%; height: auto），遮罩容器必须设 position: relative，伪元素才好绝对定位覆盖

用 ::before 伪元素实现无侵入式遮罩

不用改 HTML 结构，只靠 CSS 就能给任意 加遮罩，前提是把图片包进一个容器（比如

这样做的好处是语义干净、JS 不用动 DOM，也方便复用类名。但要注意：伪元素默认不占文档流，必须显式设置 content: "" 和尺寸，否则看不到遮罩。

立即学习“前端免费学习笔记（深入）”；

• .img-container { position: relative; display: inline-block; } —— 容器必须有定位上下文
• .img-container::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(0,0,0,0.6), transparent); }
• 如果遮罩要响应鼠标悬停变化，直接加 .img-container:hover::before { opacity: 0.3; } 即可，无需 JS

mask-image 方案虽新但兼容性差

真·遮罩（即按 Alpha 通道裁剪内容）要用 mask-image + linear-gradient，比如 mask-image: linear-gradient(to bottom, black, transparent)。但它在 Safari 15.4+ 才稳定支持，Chrome 要加 -webkit-mask-image 前缀，Firefox 目前完全不支持（截至 2024 年中）。

知识吐司

专注K12教育的AI知识漫画生成工具

下载

除非你只面向 Safari 用户，或者做实验性项目，否则不建议主用此方案。它和背景渐变的区别在于：前者是“挖洞”，后者是“盖层”；前者能做出镂空文字效果，后者只是叠加一层半透色块。

• 使用 mask-image 时，渐变颜色只能用 black/white/transparent，RGBA 无效
• mask-mode: luminance 是默认值，别手动设，否则旧版 Safari 会失效
• 调试时可临时加 mask-border: 1px solid red 看遮罩范围（仅 Safari 支持）

图片模糊 + 渐变遮罩容易糊成一片

很多人想实现“毛玻璃+顶部渐隐”的效果，结果一加 filter: blur(8px)，遮罩就看不清了——因为 blur 会影响整个元素及其伪元素，导致渐变边缘发散失真。

正确做法是把图片和遮罩拆成两个独立图层：图片层负责模糊，遮罩层保持清晰，再用 z-index 叠在一起。这意味着不能用伪元素，得用真实 DOM 元素包裹。

• 结构示例：

  
    
  @@##@@
    
  
  

• .glass-bg { filter: blur(10px); }，.glass-mask { background: linear-gradient(to bottom, rgba(0,0,0,0.7), transparent); }
• 两层都设 position: absolute，父容器 position: relative 控制堆叠

渐变遮罩看着简单，但一旦混入滤镜、响应式、滚动粘滞等场景，层级和渲染顺序就很容易错乱。动手前先确认：你要的是视觉叠加效果，还是真正的 Alpha 遮罩逻辑？前者用 background，后者才碰 mask-image。