主页 / user-2846038

VMX's questions

Martin Hope
VMX
Asked: 2025-01-10 07:24:56 +0800 CST
  • 5

首先，如果这个问题有点愚蠢，我深表歉意，因为我对 CSS 还不太了解。我搜索了一段时间，但找不到可行的解决方案。

我对 Hugo 主题进行了一些重大修改，一切都按我想要的方式进行......除了粘性标题后面的模糊效果。

首先，以下几段录音比文字更能描述这个问题：

这里有一个用作背景图像的渐变，在我的站点范围主题中定义如下：

    background-image: linear-gradient(38.73deg,
            rgb(0 37 204 / 25%) 0%,
            rgba(201, 32, 184, 0) 50%),
        linear-gradient(141.27deg,
            rgba(0, 70, 209, 0) 50%,
            rgb(174 0 209 / 25%) 100%);
    background-attachment: fixed;

然后我的标题 CSS 如下所示：

header {
    z-index: 10;
    position: sticky;
    top: 0;
    -webkit-backdrop-filter: blur(20px) saturate(0.8) !important;
    backdrop-filter: blur(20px) saturate(0.2) !important;
    --background-color: rgba(0, 0, 0, 0);
}

.showHeaderOnTop {
    box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
    top: 0;
    position: sticky;
}

如您所见，当滚动到页面中间时，我的透明标题及其模糊效果可以正常工作。但是，当滚动到页面的最顶部时，我可以通过标题看到页面的背景颜色，而不是背景图像。

如果您查看移动动画，您会发现当标题展开时，背景间隙也会随之扩大。因此看起来背景图像总是从顶部的垂直间隙开始，该间隙等于标题的当前高度。

关于如何消除该间隙并使背景图像始终从页面顶部开始，您有什么想法吗？

我很抱歉在这里没有提供任何 HTML，因为这是一个基于一些额外定制的定制 Hugo 主题……这意味着实际代码是一团糟，分散在各处并通过不同的布局和部分文件生成。

但如果有人能指出我应该寻找的正确方向，那将会有很大的帮助。

html