变色龙标题 | CSS-Tricks

来自 Sebastiano Guerriero 的精彩演示。当固定定位的页眉从重叠的不同颜色背景移动时，颜色会翻转以适合该背景。Sebastiano 的技巧非常巧妙，涉及在每个部分内使用页眉的多个副本（这些副本对屏幕阅读器隐藏），这些副本全部定位在彼此之上，然后在新的部分出现时显示，因为每个部分都有一个围绕它的 clip-path。

如果我曾经见过一个真正的 CSS 技巧，这就是它。

它让我希望有一种更简单的方法。例如，如果 mix-blend-mode 有某种神奇的值可以处理它呢？我做得足够接近，这让我燃起了希望。

直接链接 →

Luca

# 2020 年 2 月 27 日

有趣的想法，但正如您所写，我希望有一个更强大（更简洁）的解决方案。我会等待您的技巧之一 :-)

Jérôme Pott

# 2020 年 2 月 27 日

我喜欢这种效果！您也可以在 https://www.dropbox.com/ 上看到它的实际效果。
去年，我在一篇博文中详细解释了如何实现它
https://dev.to/mornir/cool-css-effect-j2n

我花了很长时间才理解重叠和 clip-path 属性。我很高兴知道可能有一种更简单的方法。

Micha

# 2020 年 2 月 27 日

真的很酷！感谢分享。
我在 site-header 类中添加了一些“backdrop-filter: blur(3px);”，以更多地将页眉和内容分开。

Chris

# 2020 年 2 月 27 日

您可以轻松使用 Javascript 的 Intersection Observer 来创建一个这样的页眉。不需要多个 HTML 元素。

单击此处查看页眉在滚动时更改颜色的示例

Davor Suljic

# 2020 年 2 月 27 日

我在每个 <section> 中添加了一个空的 <div> 并应用了

.sticky-div {

    position: sticky;
    top: 0;
    z-index: 5;
    background: inherit;
    opacity: .9;
  }

因此，当它在 <header> 下滚动时，mix-blend-mode: difference; 会启动。

Chris Coyier

评论永久链接# 2020 年 2 月 27 日

非常酷。

Stephan Burger

# 2020 年 2 月 28 日

我们之前使用 position sticky 做过这个。相信我，我一直在努力寻找一种更简洁的方法。我最终求助于 javascript，但对性能感到不满意。所以我们用 CSS 和 css clip path: inset(0) 做了。不过它有一个缺陷；它在 Firefox 中不起作用。

说实话，Firefox 中的 css 非常有 bug。无论如何，这是我们的版本：https://studio.avvent.io

此评论线程已关闭。如果您有重要信息需要分享，请联系我们。