CSS怎样实现图片局部聚焦效果？mask-image遮罩

使用mask-image结合radial-gradient可实现图片局部聚焦，通过透明到黑色的渐变遮罩控制可见区域；2. 实现聚焦效果需分层处理：底层为原始图片，上层为应用filter的同图，通过mask-image使聚焦区透明显露下层清晰内容；3. 动态聚焦需结合css变量与javascript，实时更新遮罩位置以跟随鼠标，但需注意频繁重绘和滤镜计算带来的性能开销，尤其在低端设备上blur等滤镜易导致卡顿，且需考虑浏览器对mask-image和filter的兼容性支持。

在CSS中实现图片的局部聚焦效果，

mask-image

解决方案

要通过

mask-image

最常见的聚焦效果是圆形或椭圆形，这可以通过

radial-gradient

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

1. 基础聚焦： 假设你有一张图片，你想让它中心的一个圆形区域清晰可见，而图片的其他部分被隐藏。

   .focus-image {
     width: 600px;
     height: 400px;
     background-image: url('your-image.jpg');
     background-size: cover;
     background-position: center;
     /* 核心：使用径向渐变作为遮罩 */
     /* 解释：
        - circle at center: 遮罩形状为圆形，中心在元素中央。
        - transparent 0%: 遮罩中心完全透明（图片完全可见）。
        - transparent 100px: 从中心到100px半径内，遮罩保持透明。
        - black 150px: 从100px到150px，遮罩颜色从透明过渡到黑色。
          黑色在mask-image中代表完全不透明，会隐藏图片。
          所以，这里是让图片在100px半径内可见，150px外完全隐藏，中间是柔和过渡。
          如果想让外面可见，里面隐藏，则需要反过来，或者结合两层元素。
     */
     -webkit-mask-image: radial-gradient(circle at center, transparent 0%, transparent 100px, black 150px);
     mask-image: radial-gradient(circle at center, transparent 0%, transparent 100px, black 150px);
   }

   登录后复制

   这段代码会把图片裁剪成一个中心清晰、边缘逐渐消失的圆形。

2. 结合滤镜的“聚焦”效果： 更常见的“局部聚焦”是让聚焦区域清晰，而背景区域模糊或灰度化。这通常需要两层元素配合：一层是原始图片，另一层是应用了滤镜的同一张图片，然后通过

   mask-image

   登录后复制
   来控制第二层的可见性，从而暴露出下方的原始图片。

   <div class="image-container">
     <img src="your-image.jpg" alt="Original Image" class="original-image">
     <div class="filtered-overlay"></div>
   </div>

   登录后复制

   .image-container {
     position: relative;
     width: 600px;
     height: 400px;
     overflow: hidden; /* 确保内容不溢出 */
   }
   
   .original-image {
     width: 100%;
     height: 100%;
     object-fit: cover;
     position: absolute;
     top: 0;
     left: 0;
   }
   
   .filtered-overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: url('your-image.jpg'); /* 与原始图片相同 */
     background-size: cover;
     background-position: center;
     filter: grayscale(100%) blur(3px); /* 应用你想要的滤镜效果 */
   
     /* 核心：遮罩层。
        这里遮罩的逻辑是：
        - transparent 0%, transparent 100px: 遮罩中心区域透明，让下方的 .original-image 显露出来。
        - black 150px: 遮罩从100px到150px逐渐变为不透明（黑色），从而显示 .filtered-overlay 自身。
        所以，中心区域是原始图片，外围是滤镜效果的图片。
     */
     -webkit-mask-image: radial-gradient(circle at center, transparent 0%, transparent 100px, black 150px);
     mask-image: radial-gradient(circle at center, transparent 0%, transparent 100px, black 150px);
   }

   登录后复制

3. 动态聚焦： 要实现鼠标悬停或跟随鼠标的动态聚焦，你需要结合CSS变量和JavaScript来更新遮罩的位置。

   /* 假设 .filtered-overlay 样式不变，只增加一个过渡 */
   .filtered-overlay {
     /* ... 其他样式 ... */
     transition: mask-image 0.3s ease-out, -webkit-mask-image 0.3s ease-out; /* 动画平滑过渡 */
   }
   
   /* 鼠标悬停时，改变遮罩中心 */
   .image-container:hover .filtered-overlay {
     /* 这里的 var(--mouse-x) 和 var(--mouse-y) 需要通过 JavaScript 动态设置 */
     -webkit-mask-image: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), transparent 0%, transparent 80px, black 120px);
     mask-image: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), transparent 0%, transparent 80px, black 120px);
   }

   登录后复制

   对应的JavaScript：

   document.querySelector('.image-container').addEventListener('mousemove', function(e) {
     const rect = this.getBoundingClientRect();
     const x = e.clientX - rect.left; // 鼠标在元素内的X坐标
     const y = e.clientY - rect.top;  // 鼠标在元素内的Y坐标
   
     // 将像素坐标转换为百分比，或者直接使用像素值（但百分比更通用）
     this.style.setProperty('--mouse-x', `${x}px`);
     this.style.setProperty('--mouse-y', `${y}px`);
   });
   
   document.querySelector('.image-container').addEventListener('mouseleave', function() {
     // 鼠标离开时重置到中心，或移除变量让CSS默认值生效
     this.style.removeProperty('--mouse-x');
     this.style.removeProperty('--mouse-y');
   });

   登录后复制

   这样，当鼠标在图片上移动时，聚焦区域就会跟随鼠标，带来非常自然的交互体验。

为什么传统的

object-fit

登录后复制

或

background-position

登录后复制

难以实现精细局部聚焦？

当我们谈到图片显示，

object-fit

background-position

object-fit

cover

contain

fill

object-fit

而

background-position

background-position: top left;

mask-image

mask-image

object-fit

background-position

如何结合CSS滤镜（filter）提升局部聚焦的视觉表现力？

将

mask-image

filter

mask-image

火龙果写作

用火龙果，轻松写作，通过校对、改写、扩展等功能实现高质量内容生产。

106

查看详情

实现这种效果，通常需要多层结构。前面在解决方案中也提到了，这里再深入展开一下背后的逻辑。

想象一下，你有一张照片，你想让照片里的一朵花是彩色的、清晰的，而周围的背景是黑白的、模糊的。你不能直接对一张图片同时应用两种状态。所以，你需要两张“照片”：一张是原始的彩色清晰照片，另一张是经过黑白和模糊处理后的同一张照片。然后，你把处理过的照片放在下面，原始照片放在上面。接着，你在原始照片上“挖一个洞”（用

mask-image

等等，这个逻辑好像反了。我们想要的是“聚焦区域清晰，非聚焦区域模糊/灰度”。

正确的逻辑应该是：

1. 底层图片：放置你的原始图片，这张图片是完全清晰、未处理的。
2. 上层覆盖层：这是一个与底层图片完全重叠的元素，它也包含同一张图片，但这张图片已经通过

   filter

   登录后复制
   属性（例如

   filter: grayscale(100%) blur(3px);

   登录后复制
   ）进行了处理。
3. 遮罩应用：将

   mask-image

   登录后复制
   应用到上层覆盖层。这个遮罩的目的是让聚焦区域的覆盖层变得透明，从而暴露出下方清晰的原始图片。而遮罩的非聚焦区域则让覆盖层保持不透明，从而显示出经过滤镜处理的图片。

我们再回顾一下

mask-image

• 遮罩图像中白色或不透明的部分，会使被遮罩元素可见。
• 遮罩图像中黑色或透明的部分，会使被遮罩元素隐藏。

所以，为了让上层覆盖层的“聚焦区域”透明，遮罩在该区域应该是透明的。而为了让上层覆盖层的“非聚焦区域”可见（显示模糊/灰度效果），遮罩在该区域应该是不透明的（黑色）。

因此，一个

radial-gradient

radial-gradient(circle at center, transparent 0%, transparent 100px, black 150px)

• transparent 0%, transparent 100px

  登录后复制
  : 遮罩中心100px半径内是透明的。这意味着

  filtered-overlay

  登录后复制
  在这个区域是透明的，下方清晰的

  original-image

  登录后复制
  得以显示。

• black 150px

  登录后复制
  : 遮罩从100px到150px半径逐渐变为黑色。这意味着

  filtered-overlay

  登录后复制
  从透明逐渐变为不透明，显示其自身的滤镜效果。

通过这种分层和遮罩的巧妙配合，我们可以实现：

• 灰度聚焦：

  filter: grayscale(100%)

  登录后复制
  。非聚焦区域变成黑白。
• 模糊聚焦：

  filter: blur(5px)

  登录后复制
  。非聚焦区域变得模糊。
• 亮度/对比度聚焦：

  filter: brightness(50%) contrast(150%)

  登录后复制
  。非聚焦区域变暗或对比度增强。
• 混合效果：可以同时应用多个滤镜，如

  filter: grayscale(100%) blur(3px) brightness(80%);

  登录后复制
  ，创造出更丰富的视觉层次。

这种方法不仅提供了视觉上的对比，引导用户视线，还保留了图片本身的完整性，没有对原始图片进行实际修改，仅仅是视觉上的呈现差异。

实现动态聚焦效果时，有哪些性能考量和兼容性挑战？

动态的局部聚焦效果，尤其是在鼠标移动时跟随焦点，虽然视觉上非常吸引人，但在实际实现时，确实会遇到一些性能和兼容性的考量。

性能考量：

1. mask-image

   登录后复制
   的计算成本：

   mask-image

   登录后复制
   ，尤其是使用复杂的渐变（如

   radial-gradient

   登录后复制
   ）或大型SVG作为遮罩时，每次渲染都需要浏览器进行复杂的像素级计算。当这个遮罩频繁变化（例如跟随鼠标移动）时，会导致大量的重绘（repaint）。
2. 滤镜（

   filter

   登录后复制
   ）的性能开销：

   filter

   登录后复制
   属性，特别是

   blur()

   登录后复制
   ，是GPU密集型操作。对整个图片（即使是覆盖层）进行实时模糊计算，会消耗显著的图形处理资源。在低端设备或老旧浏览器上，这可能导致动画卡顿、帧率下降，用户体验大打折扣。
3. **

以上就是CSS怎样实现图片局部聚焦效果？mask-image遮罩的详细内容，更多请关注php中文网其它相关文章！