html - 从父母中排除孩子 svg mask-image

Question

编辑：使用Temani Afif的答案修复它

我在父 div 上使用 SVG 蒙版为背景创建形状。但是我希望蒙面 div 的子图像溢出 div。蒙版也会使子图像被屏蔽掉。有没有办法清除子 img 元素的掩码？

这是当前情况的图像：当前情况

这是显示想要的结果的图像： 想要的结果

这是我的简化代码：

<a href="#" class="mask wide" style="background-color: red">
    <div class="image-name-wrapper">
        <img src="https://www.wonderfulnature.nl/uploads/6/5/2/6/65266507/zebra-3-wonderful-nature_1.jpg" alt=""/>
        <h3 class="title">Title</h3>
    </div>
</a>

.mask {
    mask-mode: alpha;
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
    mask-position: center;
    &.horizontal {
        mask-image: url(../assets/masks/mask-horizontal.svg);
    }
    &.vertical {
        mask-image: url(../assets/masks/mask-vertical.svg);
    }
    &.wide {
        mask-image: url(../assets/masks/mask-wide.svg);
    }
}

img{
    width: 5.5rem;
    height: 5.5rem;
    margin-left: -2.25rem
}

标签： htmlcsssvgsass