CSS怎样实现图片局部马赛克？mask-composite合成

css实现图片局部马赛克的核心是利用伪元素创建模糊层，并通过mask属性控制显示区域，mask-composite用于合成多个遮罩。1. 使用容器元素设置原始图片为背景；2. 利用::before或::after伪元素复制背景并应用filter: blur()生成模糊层；3. 通过mask-image定义多个遮罩形状（如圆形和矩形）；4. 使用mask-size、mask-position和mask-repeat确保遮罩正确布局；5. 应用mask-composite: add将多个遮罩区域合并显示，实现多区域马赛克效果。该方法性能好、响应式强且代码简洁，适合大多数视觉模拟需求，但若需精确像素化处理，则建议使用svg或canvas方案。

CSS实现图片局部马赛克，核心在于创建两个视觉层：一个原始图像层，一个经过模糊（模拟马赛克）处理的图像层。通过CSS

mask

属性精确控制模糊层只在特定区域显示，而

mask-composite

则能让你灵活地组合多个遮罩形状，实现复杂区域的马赛克效果。

解决方案

要实现图片局部马赛克，我们通常会利用CSS的伪元素来创建马赛克层，并运用

filter

滤镜进行模糊处理，最后通过

mask

属性来定义马赛克显示的具体区域。

mask-composite

在这里的作用，是当你需要将多个不规则或不连续的区域同时进行马赛克处理时，它能让你巧妙地合成这些遮罩形状。

我的做法是，在一个容器元素上放置原始图片作为背景，然后利用其

::before

或

::after

伪元素，复制这份背景图，并对其应用

filter: blur()

。这个模糊后的伪元素就是我们的“马赛克层”。接着，关键步骤来了：我们对这个伪元素应用

mask-image

来定义马赛克区域的形状。如果你需要马赛克多个独立区域，你可以给

mask-image

提供多个值（例如，一个圆形渐变和一个矩形渐变），然后通过

mask-composite

属性来决定这些遮罩如何叠加、组合。

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

下面是一个具体的CSS代码示例，展示了如何让一个图片同时在圆形和矩形区域显示马赛克效果：

.image-wrapper {     width: 600px;     height: 400px;     background-image: url('https://via.placeholder.com/600x400/87CEEB/FFFFFF?text=Original+Image'); /* 替换为你的图片路径 */     background-size: cover;     background-position: center;     position: relative;     overflow: hidden; /* 防止模糊溢出容器 */     font-family: sans-serif;     color: #333;     display: flex;     align-items: center;     justify-content: center;     font-size: 2em;     text-shadow: 1px 1px 2px rgba(0,0,0,0.5); }  .image-wrapper::before {     content: '';     position: absolute;     /* 稍微放大并偏移，确保模糊边缘能完全覆盖 */     top: -10px;     left: -10px;     width: calc(100% + 20px);     height: calc(100% + 20px);     background-image: inherit; /* 继承父元素的背景图 */     background-size: cover;     background-position: center;     filter: blur(15px); /* 调整模糊程度以模拟马赛克效果 */      /* 定义两个不同的马赛克区域遮罩 */     /* 第一个遮罩：一个位于图片左上角的圆形区域 */     mask-image: radial-gradient(circle at 25% 30%, black 0%, transparent 40%),                 /* 第二个遮罩：一个位于图片右下角的矩形区域 */                 linear-gradient(to top left, transparent 50%, black 50%);      /* 确保每个遮罩都覆盖整个伪元素 */     mask-size: 100% 100%, 100% 100%;     mask-repeat: no-repeat;     mask-position: 0 0, 0 0; /* 为每个mask-image指定位置，这里都从0 0开始 */      /* 使用mask-composite合成这两个遮罩 */     /* add 模式会将所有遮罩区域叠加，任何一个遮罩有黑色（不透明）的地方，马赛克都会显示 */     mask-composite: add;  }  /* 仅用于展示效果，可忽略 */ .image-wrapper span {     z-index: 1; /* 确保文字在马赛克层之上 */     background-color: rgba(255, 255, 255, 0.7);     padding: 10px 20px;     border-radius: 5px; }

这段代码里，

mask-image

属性接受了两个值，分别定义了一个圆形渐变和一个线性渐变作为遮罩。而

mask-composite: add

则告诉浏览器，将这两个遮罩区域合并起来，只要任何一个遮罩在某个位置是不透明的（即

black

），那么马赛克效果就会在该位置显示。

为什么选择CSS mask而不是其他方法？

在我看来，选择CSS

mask

来实现图片局部马赛克，主要是因为它在Web前端开发中提供了一个相对平衡的解决方案。它不像纯JavaScript或Canvas那样需要额外的运行时计算和复杂的API操作，也不像SVG滤镜那样可能需要更深入的XML结构知识。

首先，性能方面，CSS

mask

属性通常能得到浏览器的GPU加速，这意味着它在动画或用户交互时表现流畅，不会给主线程带来太大负担。这一点对于用户体验至关重要，没人喜欢卡顿的页面。其次，它的响应式能力很强。由于

mask

是CSS属性，它能与布局、媒体查询无缝结合，轻松适应不同屏幕尺寸和设备方向，而无需编写额外的逻辑。代码也相对简洁，一旦你理解了

mask-image

和

mask-composite

的原理，实现复杂效果的代码量并不大。

当然，它也有局限性。最明显的一点是，CSS

filter: blur()

提供的“马赛克”效果并非真正的像素化。它更像是一种模糊处理，虽然视觉上能达到类似马赛克的效果，但如果你对像素的网格化有严格要求，CSS可能就力不从心了。这时，SVG滤镜（特别是

feGaussianBlur

结合

feComponentTransfer

）能提供更精确的像素化控制，但它会增加DOM结构和代码复杂度。更极致的，如果需要高度动态、可编程的像素化，或者涉及到图像处理算法，Canvas和JavaScript无疑是更强大的选择，但这也意味着更高的开发成本和潜在的性能开销。

所以，我的建议是：对于大多数轻量级、视觉模拟性质的局部马赛克需求，CSS

mask

是首选。它兼顾了性能、开发效率和响应式。但如果你追求的是像素级的完美复刻，或者需要非常复杂的动态交互，那么深入研究SVG或Canvas会是更明智的投入。

mask-composite

的几种常见合成模式及其应用场景

mask-composite

是CSS

mask

模块中一个非常强大的属性，它允许你定义多个

mask-image

层如何相互作用，从而创建出极其复杂的遮罩形状。理解这些合成模式对于精确控制马赛克区域至关重要。

• add

  (默认值): 这是最直观的模式，它将所有遮罩层进行“逻辑或”操作，即任何一个遮罩层有内容（非透明）的地方，最终的遮罩结果都会有内容。在局部马赛克的场景中，如果你想在图片上同时马赛克多个不连续的区域（比如一个人的脸和旁边的车牌号），你可以为每个区域定义一个

  mask-image

  ，然后使用

  mask-composite: add

  将它们合并。只要这些区域的任何一部分被遮罩，马赛克就会显示出来。

• subtract

  : 这个模式是从前一个遮罩层中减去当前遮罩层的内容。想象一下，你有一个很大的圆形马赛克区域，但你希望在这个圆形中间留一个清晰的“洞”。你可以先定义一个圆形遮罩作为第一个

  mask-image

  ，然后定义一个更小的圆形遮罩作为第二个

  mask-image

  ，并将其

  mask-composite

  设置为

  subtract

  。这样，小圆形区域就会从大圆形中被“挖掉”，形成一个环形马赛克。

• intersect

  :

  intersect

  模式只保留所有遮罩层重叠（即所有遮罩层都有内容）的区域。如果你需要马赛克的区域是两个或