如何仅对图片的指定局部区域应用CSS样式

数据老陈

2026-10-21

实现局部图片应用CSS样式的可行方案

共有两种兼容性较好的实现方式，你可以根据需求选择：

方案1：基于现有结构调整，用`backdrop-filter`实现

你当前已经有独立的.blurred空容器，只需修改CSS即可实现局部模糊效果，无需改动HTML结构：

.blurred
{
    position: absolute;
    top: 0; /* 调整为你要模糊区域的顶部位置 */
    left: 0; /* 调整为你要模糊区域的左侧位置 */
    z-index: 100;
    width: 100%;
    height: 50%; /* 按需调整模糊区域的高度，比如50%就是覆盖图片上半部分 */
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px); /* 替换原有filter，只会对下层的图片内容生效 */
    /* 移除原有的transform属性即可 */
}

注意事项：需要把`.blurred`容器和目标图片放在同一个设置了`position: relative`的父容器内，保证定位是相对于图片区域生效。你的现有代码里文字层z-index为200，不会被模糊层遮挡，无需调整层级。

方案2：兼容旧浏览器的裁剪实现

如果需要兼容不支持backdrop-filter的旧版本浏览器，可以用两张叠放的相同图片配合clip-path实现：

<!-- 父容器需设置相对定位 -->
<div style="position: relative;">
  <!-- 底层正常显示的原图 -->
  <img width="20%" height="10% !important" style="position:absolute;top:12%;left:1%;z-index:0" src="images/logo.png" alt="Logo">
  <!-- 上层添加模糊效果的图片副本 -->
  <img width="20%" height="10% !important" style="position:absolute;top:12%;left:1%;z-index:100" src="images/logo.png" alt="" class="partial-blur">
</div>

对应的CSS：

.partial-blur {
    -webkit-filter: blur(12px);
    filter: blur(12px);
    /* 裁剪规则：inset(上 右 下 左)，以下配置代表保留上半50%区域显示模糊效果 */
    clip-path: inset(0 0 50% 0);
}