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

CSS的mask-image属性可以为元素添加遮罩层，遮罩层的透明区域会让元素对应部分不可见，不透明区域则保留元素原本的显示内容，利用这个特性我们可以轻松实现图片的局部聚焦效果，让图片指定区域高亮展示，其余部分自然弱化。

mask-image遮罩的基本语法

mask-image是CSS遮罩模块的核心属性，用于指定作为遮罩的图像，基础语法如下：

/* 基础语法 */
.element {
    mask-image: url(遮罩图像地址);
    mask-size: cover; /* 控制遮罩图像的尺寸 */
    mask-position: center; /* 控制遮罩图像的位置 */
}

遮罩图像中，白色区域对应元素内容会完全显示，黑色区域对应元素内容会完全隐藏，灰色过渡区域则会呈现半透明的效果，我们可以利用这个规则制作聚焦遮罩。

实现圆形局部聚焦效果

我们可以制作一个中心为白色、边缘为黑色的径向渐变图像作为遮罩，这样就能让图片中心区域完全显示，边缘区域逐渐隐藏，实现局部聚焦的效果。以下是完整的实现示例：

HTML结构

<div class="focus-container">
    <img src="https://picsum.photos/600/400?random=2" alt="示例图片" class="focus-img">
</div>

CSS样式

/* 容器样式，控制图片尺寸 */
.focus-container {
    width: 600px;
    height: 400px;
    /* 可选：添加背景色，聚焦区域外的部分会显示这个背景色 */
    background-color: #f0f0f0;
}

/* 图片样式，添加遮罩实现局部聚焦 */
.focus-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 使用径向渐变作为遮罩，中心白色不透明，边缘黑色透明 */
    mask-image: radial-gradient(
        circle at center,
        rgba(255, 255, 255, 1) 30%,
        rgba(255, 255, 255, 0) 70%
    );
    /* 遮罩尺寸覆盖整个图片 */
    mask-size: 100% 100%;
    /* 遮罩位置居中 */
    mask-position: center;
    /* 可选：添加过渡效果，让聚焦区域变化更平滑 */
    transition: mask-image 0.3s ease;
}

/* 可选：鼠标悬停时扩大聚焦区域 */
.focus-img:hover {
    mask-image: radial-gradient(
        circle at center,
        rgba(255, 255, 255, 1) 50%,
        rgba(255, 255, 255, 0) 90%
    );
}

上面的代码中，径向渐变的中心是透明度为1的白色，半径30%的区域完全显示图片内容，从30%到70%的区域逐渐过渡到透明，70%以外的区域完全隐藏，这样就形成了中心聚焦的效果。如果容器设置了背景色，隐藏的区域会显示容器的背景色，视觉上就达到了弱化非聚焦区域的目的。

其他形状的局部聚焦实现

除了圆形，我们还可以使用其他形状的遮罩实现不同的聚焦效果，比如矩形聚焦、自定义图形聚焦：

矩形局部聚焦

.rect-focus {
    /* 使用线性渐变制作矩形遮罩，中心矩形区域显示，边缘隐藏 */
    mask-image: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 10%,
        rgba(255, 255, 255, 1) 30%,
        rgba(255, 255, 255, 1) 70%,
        rgba(255, 255, 255, 0) 90%
    );
}

自定义图形聚焦

如果有更复杂的聚焦形状需求，可以提前制作好对应形状的PNG遮罩图，PNG图的透明部分对应隐藏区域，不透明部分对应显示区域，然后将mask-image指向该图片地址即可：

.custom-focus {
    mask-image: url('mask-shape.png');
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
}

浏览器兼容性说明

mask-image属性在现代浏览器中支持度已经比较成熟，Chrome、Edge、Firefox、Safari等主流浏览器都支持该属性，不过部分旧版本浏览器可能需要添加前缀：

• Chrome、Edge等基于Chromium的浏览器无需前缀，直接支持
• Firefox需要添加-moz-前缀，写为-moz-mask-image
• Safari需要添加-webkit-前缀，写为-webkit-mask-image

如果需要兼容旧版本浏览器，可以同时添加带前缀的属性和无前缀的属性，确保样式正常生效。

CSSmask-image图片局部聚焦遮罩效果修改时间：2026-06-30 15:48:32