前端Wiki/CSS3/深入/现代特性

filter 滤镜与混合模式

filter 给元素整体加图像滤镜，语法是函数列表：

blur(4px) 高斯模糊——毛玻璃（配合半透明背景）、置灰背景的标配。
brightness() 亮度、contrast() 对比度、saturate() 饱和度，调图三件套。
grayscale(1) 全灰、sepia() 复古、invert(1) 反色、hue-rotate(90deg) 色相旋转。
drop-shadow()：按元素实际形状投影，透明 PNG 也能贴着轮廓投影，比 box-shadow 更聪明。

混合模式（blend mode）控制两层颜色如何融合：mix-blend-mode 让元素与下层混合，background-blend-mode 让同一元素的多层背景混合。常用 multiply 正片叠底、screen 滤色、overlay 叠加——文字压图、双色海报、艺术调色都靠它们。

本节要点filter 常用 blur/brightness/grayscale/drop-shadow，drop-shadow 沿透明轮廓投影；mix-blend-mode 控制与下层元素的融合方式，multiply 和 screen 最常用。

CSS

<style>
  .blur-bg {
    height: 70px;
    background:
      linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)),
      linear-gradient(45deg, #39c5cf, #7c4dff);
    filter: blur(0.5px);
    display: flex; align-items: center;
    padding: 0 12px;
  }
  .pic {
    width: 90px; height: 90px;
    margin: 10px;
    /* 透明贴纸形状 + 沿形状投影 */
    background: radial-gradient(circle at 35% 35%, #fff, #39c5cf 60%, transparent 61%);
    filter: drop-shadow(0 4px 6px rgba(0,0,0,.4));
  }
  .blend {
    width: 90px; height: 90px;
    background: linear-gradient(#ff5252, #ffca28);
    mix-blend-mode: multiply;  /* 与下层正片叠底 */
  }
</style>
<div class="blur-bg">半透明毛玻璃效果</div>
<div style="display:flex;">
  <div class="pic"></div>
  <div class="blend"></div>
</div>

🔗 相关词条box-shadow 元素列表函数

📚 推荐阅读

移动前端开发经验指南万象云档

YY UED 前端规范指南万象云档

优达学城前端样式指南万象云档

Element Plus v2.2 组件库教程万象云档

ECharts 图表教程万象云档

来自万象云档的免费在线书籍，点击封面直接阅读