如何实现容器内区块Hover时仅局部取消图片灰度滤镜效果

需求说明 #

• 容器背景图始终保持全灰度状态（filter: grayscale(100%)）
• 容器内固定尺寸的block元素，初始显示对应区域的灰度背景图
• 鼠标hover某一block时，仅该区块内的对应背景图区域取消灰度，其余区域仍为灰度
• 区块仅可视范围受滤镜影响，不得超出自身边界

原有尝试代码 #

CSS #

.container {
    position: relative;
    height: 100vh;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-image: url('image.jpg');
    background-size: cover;
    background-position: center;
    filter: grayscale(100%);
}

.block {
    width: 250px;
    height: 400px;
    position: relative;
    overflow: hidden;
    border: 1px solid #ccc;
}

.block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: inherit;
    background-size: cover;
    background-position: center;
    filter: grayscale(100%);
    transition: filter 0.3s ease;
}

.block:hover::before {
    filter: grayscale(0%);
}

HTML #

<div class="container">
    <div class="block block-orange"></div>
    <div class="block block-green"></div>
    <div class="block block-blue"></div>
</div>

修正后的实现方案 #

原有方案的问题在于：容器的滤镜会作用于所有子元素，且block伪元素的背景图位置无法与容器对应区域精准匹配。以下是满足需求的实现代码：

CSS #

.container {
    position: relative;
    height: 100vh;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

/* 全灰度背景层 - 始终显示在最底层 */
.container::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('image.jpg');
    background-size: cover;
    background-position: center;
    filter: grayscale(100%);
    z-index: 0;
}

.block {
    width: 250px;
    height: 400px;
    position: relative;
    overflow: hidden;
    border: 1px solid #ccc;
    z-index: 1; /* 确保区块在灰度背景层上方 */
}

/* 区块的彩色背景层 - 初始灰度，hover取消 */
.block::before {
    content: '';
    position: fixed; /* 与视口对齐，保证背景图和容器完全匹配 */
    inset: 0;
    background-image: url('image.jpg');
    background-size: cover;
    background-position: center;
    filter: grayscale(100%);
    transition: filter 0.3s ease;
}

.block:hover::before {
    filter: grayscale(0%);
}

HTML #

<div class="container">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
</div>

关键实现要点 #

• 用容器的伪元素单独实现全灰度背景，避免滤镜影响子元素
• 区块的伪元素使用fixed定位，尺寸覆盖整个视口，背景图参数与容器完全一致，确保显示区域精准匹配
• 依靠区块的overflow: hidden特性，仅显示自身范围内的背景图部分
• hover时仅取消当前区块伪元素的灰度滤镜，其余区域保持灰度

内容的提问来源于stack exchange，提问作者savages