某些背景上的奇怪阴影

问题描述

我在我的剪辑路径上应用了阴影滤镜，虽然阴影在白色背景上效果很好，但在较暗的背景上根本不起作用（下面的示例）-

它只是看起来像一些奇怪的线条而不是模糊的阴影，阴影比背景更暗，使阴影完全黑色使其在阴影开始时起作用，但到最后它再次出现这些线条. 代码：

body {
  margin: 0;
  overflow-x: hidden;
  height: 2000px;
}

body .headerText {
  position: absolute;
  top: 50vh;
  left: 40vw;
  -webkit-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
  font-size: 8vh;
  z-index: 10;
  color: white;
  mix-blend-mode: exclusion;
}

body .headerWrap {
  position: fixed;
  filter: drop-shadow(-30px -30px 60px #363636) drop-shadow(-30px -30px 90px #414141);
  -webkit-filter: drop-shadow(-30px -30px 60px #363636) drop-shadow(-30px -30px 90px #414141);
}

body .headerWrap header {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: #2e2e2e;
  -webkit-clip-path: polygon(0% 0%,40% 0%,28% 100%,0% 100%);
          clip-path: polygon(0% 0%,0% 100%);
  -webkit-animation: rotate 1s 1;
          animation: rotate 1s 1;
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: calc(var(--scroll) * -3s);
          animation-delay: calc(var(--scroll) * -3s);
}

@-webkit-keyframes rotate {
  to {
    -webkit-clip-path: polygon(0% 0%,20% 0%,14% 100%,0% 100%);
            clip-path: polygon(0% 0%,0% 100%);
  }
}

@keyframes rotate {
  to {
    -webkit-clip-path: polygon(0% 0%,0% 100%);
  }
}

body .landing {
  width: 100vw;
  height: 100vh;
  background-color: white;
}

body .content {
  width: 100vw;
  height: 200vh;
  background-color: #424242;
}

<html lang="en">
<head>

</head>
<body>
    <div class="headerText"><h1>Hello bruddas</h1></div>
    <div class="headerWrap">
        <header></header>
    </div>
    <script>
        window.addEventListener('scroll',() => {
            document.body.style.setProperty('--scroll',window.pageYOffset / (document.body.offsetHeight - window.innerHeight));
          },false);
    </script>
    <div class="landing"></div>
    <div class="content"></div>
</body>

解决方法

答案

阴影适用于两种颜色。

您几乎看不到（或看不到...），但它就在那里。
线条实际上就是阴影。

这里的问题是，由于最暗和最亮颜色（对于暗颜色）之间的低对比度，屏幕呈现的颜色数量很少。

屏幕的颜色数量有限。它还取决于屏幕类型和设置，有时您可以轻松看到它（而且很难看），有时您几乎无法注意到这种行为（您只会看到平滑的渐变）。

示例

这是一个例子：

example

请注意，我对两侧使用了相同的阴影。