某些背景很奇怪 drop-shadow

Question

我在 clip-path 上应用了 drop-shadow 滤镜，虽然阴影在白色背景上效果很好，但在较暗的背景上根本不起作用（如下例）-

它看起来像是一些奇怪的线条而不是模糊的阴影，阴影比背景暗一点，使阴影完全变黑使其在阴影的开头有效但到最后它有这些线条再次。代码：

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%, 40% 0%, 28% 100%, 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%, 20% 0%, 14% 100%, 0% 100%);
  }
}

@keyframes rotate {
  to {
    -webkit-clip-path: polygon(0% 0%, 20% 0%, 14% 100%, 0% 100%);
            clip-path: polygon(0% 0%, 20% 0%, 14% 100%, 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>

Answer 1

回答

两种颜色的阴影效果都很好。

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

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

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

例子

这是一个例子：

注意我在两边使用了相同的阴影。

您应该能够看到较暗色调的线条（左侧的顶部和右侧的所有部分）。也许你根本看不到线条，同样，这取决于输出设备和设置。

某些背景很奇怪 drop-shadow

Wierd drop-shadow on certain backgrounds

html

css

dropshadow

回答

例子