为什么我的线性渐变转换为纯背景颜色？

Question

我有一个简单的导航栏，我正在对其应用渐变，遵循 w3schools 上的示例（https://www.w3schools.com/css/css3_gradients.asp）

.nav-bar {
    background-image: linear-gradient(to bottom right, var(--primary-bg-color), var(--accent-txt-color));
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

当我在浏览器中预览文件时，它会正确显示，但我在 Hostinger 上发布了页面，当我在 Chrome 上访问实时页面时，渐变会被纯色替换。渐变在其他浏览器中运行良好（我使用 Safari 和 Edge 进行了测试）。

当我使用Chrome开发者工具检查页面时，它显示应用的样式是这样的：

    background-color: var(--accent-txt-color);

我可以手动更改样式以反映我发布的代码，这是有效的，但我对为什么样式在浏览器中被覆盖感到困惑。我不在 CSS 中的其他任何地方设置导航栏的样式。

感谢您的帮助！

Answer 1

background-image: -webkit-linear-gradient(red, green, blue);

-webkit-

是 Chrome 和 Safari 的 css 前缀。我希望这能解决问题。