渐变背景向下？

Question

我的 html 页面顶部有一个渐变背景，我希望它保持在顶部，这样它就不会超出我的导航栏。它一直保持在顶部，直到我放入图像，背景跟随图像，背景停在图像的底部，我只想它保持在顶部。

P.S 我对 html 和 css/编码不太熟悉

我的代码：

body {
    font-family: system-ui;
    background-image: linear-gradient(to bottom right, #9710e6, #541a54 );
    background-repeat: no-repeat;
}

我在页面顶部也有一个标题，但它距离导航栏很短，并且不知道如何调整大小

我尝试更改最大/最小高度，我尝试更改背景位置等。

Answer 1

如果你不想让整个身体有渐变，就不要在身体上放渐变。

查看并运行此代码片段，以查看将渐变放在 a 上的示例，其中 包裹 a 和 an 。虽然你可以把它放在 a 或 等等...而不是 .

/* EDIT Don't put gradient on body, if you don't want it on the whole body */
/* body { */
header {
    font-family: system-ui;
    background-image: linear-gradient(to bottom right, #9710e6, #541a54 );
    background-repeat: no-repeat;
}

<header>
  <h1>Gradient Test</h1>

  <nav>
    <button type="button">ONE</button>
    <button type="button">TWO</button>
  </nav>
</header>

<img src="" alt="">
<p>No gradient down here.</p>
<hr>