Html 如何仅对CSS中的给定形状应用过滤器？

我创建了我的网站，我想知道如何在给定的形状上应用或禁用文件管理器。在整个图像上，我想有98%的灰度，在这个形状上应该是0%。例如：

有人能告诉我该用什么吗？我认为有：之前、之后或剪辑

编辑：（我知道我不应该给父母做灰度，但我不知道如何用另一种方法）

这是我的投资组合
让我告诉你为什么要雇用我
.视差{
背景位置：顶部；
背景图像：url（“../assets/backgroundImage.jpg”）；
背景尺寸：封面；
背景附件：固定；
左边距：-2px；
滤镜：灰度（98%）；
}
.集装箱{
滤镜：灰度（0%）；
颜色：#EEE；
边框：1px实心#EEE；
背景色：rgba（0,0,0,0）；
}

---

我真的不明白，但似乎您希望选定的形状是彩色的，其余的保持灰度不变

如果是我，我会从你的原始图像中剪下形状，上传，在图像标签中放置一个类，position:relative；。调整大小，然后移动到你想要的地方

如果你想要的话，你可以给它透明度或者其他任何东西

.typoIndex{
宽度：350px；
高度：150像素；
位置：绝对位置；
字体系列：佐治亚州，'泰晤士报新罗马'，泰晤士报，衬线；
背景色：rgba（0,0,0,0.4）；
文本对齐：左对齐；
}

文件
你的文字。。。
-您的文本等可以添加图像可以做任何事情：）-

您可以使用覆盖整个文档的大阴影来获得想要的效果。
诀窍在于，即使元素是透明的，框阴影也不会在元素后面绘制。我们在pseud元素之后使用

：：因为我们希望阴影和标题具有不同的混合模式

我用的是灰色阴影，
mix混合模式：饱和度
和
不透明度
，以获得与
灰度（98%）相似的效果

下面是一个例子：


正文{
背景：url(https://www.japan-guide.com/g19/3813_topc.jpg);
}
div{
利润率：50px 40px；
填充：20px；
边框：纯银1件；
位置：相对位置；
颜色：白色
}
div：：之后{
内容：''；
位置：绝对位置；
左：0；
右：0；
排名：0；
底部：0；
盒影：0 10px 10000px灰色；
混合模式：饱和；
不透明度：0.9；
}
hello
如果我们向下滚动，它可能不起作用，因为容器中的图像将是静态的：/如果您将您的类放在图像标记中，那么您可以用它做您想做的事情。或者您可以用它做些什么：我不知道您是否理解我。我的意思是，我们不能只为这个div设置transparent颜色，因为它下面的视差是灰度的，所以这个div也是灰色的，我希望它是彩色的。这就是问题所在。给你，我刚刚添加了：）
<template>
    <v-parallax dark class="parallax" height="798">
        <v-row no-gutters align="center" justify="center">
            <v-col class="text-right" cols="12">
                <v-container>
                    <h1>This is my portfolio</h1>
                    <h4>Let me show you why you should hire me</h4>
                </v-container>
            </v-col>
        </v-row>
    </v-parallax>
</template>
<style scoped>
    .parallax{
    background-position: top;
    background-image: url("../assets/backgroundImage.jpg");
    background-size:cover;
    background-attachment: fixed;
    margin-left:-2px;
    filter: grayscale(98%);
}
.container{
    filter:grayscale(0%);

    color:#EEE;
    border:1px solid #EEE;
    background-color:rgba(0,0,0,0);
}