通过标题菜单可以看到渐变文本是否正常？答案

【问题标题】：Is it normal that gradient text is visible through header menu?通过标题菜单可以看到渐变文本是否正常？
【发布时间】：2022-11-16 11:20:53
【问题描述】：

我正在制作一个带有标题菜单的网页，并且内容在某处有渐变文本。

我刚刚发现通过标题菜单可以看到文本，似乎文本以某种方式使标题菜单透明。

通过菜单可以看到文本

应该看起来像：

这是正常的吗？有没有其他方法可以在不影响其他元素的情况下制作渐变文字？

顺便说一句，标题和文本的 css 看起来像这样：


#header {
    position: sticky;
    top: 0;
    background-color: black;
    height: 100px;
    align-items: center;
    padding: 10px 10px 10px 10px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
}

.content_right_text {
    font-size: 60px;
    font-weight: 700;
    background: -webkit-linear-gradient(0deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.2) 10%, #ffffff 50%, #ffffff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-box-decoration-break: clone;
}

【问题讨论】：

标签： html css

【解决方案1】：

尝试将 z-index 添加到您的标题元素，以便它在滚动时保持在顶部，因为该位置设置为粘性。

#header {
    position: sticky;
    .
    .
    .
    z-index: 1;
}

【讨论】：