为什么不过滤：对比度不起作用？答案

【问题标题】：Why doesn't filter: contrast doesn't work?为什么不过滤：对比度不起作用？
【发布时间】：2020-10-12 12:54:11
【问题描述】：

所以我正在尝试使用 css 滤镜模糊和对比度属性来实现所谓的粘性效果。但是由于某种原因对比不起作用？任何想法为什么？

我在下面粘贴我的 HTML 和 CSS。

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="container">
        <div class="liquid">
            <div class="left">
                
            </div>
            <div class="right">

            </div>
        </div>
    </div>
    
</body>
</html>

SCSS：

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.container {
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

.liquid {
    display: flex;
    filter: contrast(20);

    .left,
    .right {
        width: 80px;
        height: 80px;
        background-color: black;
        border-radius: 50%;
        filter: blur(10px);
    }

    .left {
        animation: anim-1 2s infinite linear;
    }

    .right {
        animation: anim-2 2s infinite linear;
    }
}

@keyframes anim-1 {
    0% {
        transform: translateX(50%);
    }
    50% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(50%);
    }
}

@keyframes anim-2 {
    0% {
        transform: translateX(-50%);
    }
    50% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-50%);
    }
}

【问题讨论】：

过滤器不会级联 - 只保留最后应用的

标签： css filter css-selectors styles css-filters

【解决方案1】：

尝试将对比度放在模糊滤镜所在的同一行，属性之间用空格隔开：

.left,
.right {
  ...
  filter: blur(10px) contrast(20);
}

【讨论】：

【解决方案2】：

使用对比度过滤器，您必须使用 % 所以只需定义 filter:contrast(20%) 它应该可以正常工作

【讨论】：

谢谢，但它也不起作用。 px,%,no unit,都试过了还是不行

【解决方案3】：

好的，我找到了原因。我需要为也有对比度过滤器的 div 添加背景颜色

【讨论】：