徽标在 chrome 中不是渐变

Question

我是 WebDev 的新手，一直在关注创建网站的 youtube 教程。但是，我被困在这部分。我无法让我的徽标在 Chrome 中渐变。

#navbar__logo {
  background-color: #ff8177;
  background-image: linear-gradient(to top, #ff0844 0%, #ffb199, 100%);
  background-size: 100;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-text-fill-color: transparent;
  display: flex;
  align-items: center;
  cursor: pointer;
  text-decoration: none;
  font-size: 2rem;
}

Answer 1

如果您使用浏览器的开发工具检查工具运行您的代码（加上相关元素），您将在 background-image 和 background-size 属性旁边看到一个黄色三角形或类似的东西。

背景图片有一个虚假的逗号。

在这种情况下不需要背景大小——但如果你确实需要它，你必须给它单位。

#navbar__logo {
  background-color: #ff8177;
  background-image: linear-gradient(to top, #ff0844 0%, #ffb199 100%);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-text-fill-color: transparent;
  display: flex;
  align-items: center;
  cursor: pointer;
  text-decoration: none;
  font-size: 2rem;
}

<div id="navbar__logo">LOGO</div>