关于html：如何仅对CSS中的给定形状应用过滤器？

How to apply filter only for the given shape in CSS?

我创建了我的网站，我想知道如何在给定形状上应用或禁用文件管理器。在整个图像上，我希望具有98％的灰度，在这种形状下，它应该为0％。示例在这里：

enter

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<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>
This is my portfolio
<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);
}

您可以使用mix-blend-mode获得想要的效果，该效果将应用于覆盖整个文档的大阴影。
诀窍是即使元素是透明的，也不会在元素后面绘制框阴影。我们使用::after伪元素，因为我们希望阴影和标题具有不同的混合模式。

我正在使用灰色阴影mix-blend-mode: saturation;和opacity，以获得与grayscale(98%)类似的效果。

这里是例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

body {
background:url(https://www.japan-guide.com/g19/3813_topc.jpg);
}

div {
margin: 50px 40px;
padding:20px;
border:solid 1px silver;
position:relative;
color: white
}

div::after {
content:'';
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
box-shadow:0 0 10px 10000px gray;
mix-blend-mode: saturation;
opacity:0.9;
}

hello

效果类似于以下问题：仅将混合模式应用于阴影

1
2
3
4
5
6
7
8

.typoIndex {
width: 350px;
height: 150px;
position: absolute;
font-family: Georgia, 'Times New Roman', Times, serif;
background-color: rgba(0,0,0,0.4);
text-align: left;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="">
Document
</head>
<body>

<img src="" alt="">
<span id="">your text ...</span>
<p> - your text etc can add image can do whatever :) - </p>

</body>
</html>

使用rgba！