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

【问题标题】：How to apply filter only for the given shape in CSS?如何仅对 CSS 中的给定形状应用过滤器？
【发布时间】：2019-12-15 22:10:07
【问题描述】：

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

有人能告诉我我必须使用什么吗？我认为 :before,:after 或 clip 有一些东西。

编辑：（我知道我不应该灰度父级，但我不知道如何以另一种方式做到这一点）

<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);
}

【问题讨论】：

标签： html css vuetify.js

【解决方案1】：

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

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

示例如下：

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;
}

&lt;div&gt;hello&lt;/div&gt;

效果类似这个问题：Apply blend mode to drop-shadow only

【讨论】：

【解决方案2】：

.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;
}

<!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="">
  <title>Document</title>
</head>
<body>
  <div class="typoIndex">
    <img src="" alt="">
    <span id="">your text ...</span>
    <p> - your text etc can add image can do whatever :) - </p>
  </div>
</body>
</html>

使用 rgba！

【讨论】：

不知道你是否理解我。我的意思是我们不能只为这个 div 设置透明颜色，因为它下面的视差是灰度的，所以这个 div 也是灰色的，我希望它是彩色的。这就是问题所在。
给你，我刚刚添加了它:)

【解决方案3】：

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

如果是我，我会从您的原始图像中剪下形状，上传，在图像标签中放置一个类，位置：相对；。调整大小，然后将其移动到您想要的位置。

然后你可以给它透明度或任何你想要的东西。

【讨论】：

如果我们向下滚动可能会不起作用，因为容器中的图像将是静态的：/
如果你把你的类放在图像标签中，那么你可以用它做你想做的事。
或者你可以用这个做点什么：stackoverflow.com/questions/1964297/…