Question

我检查了其他一些类似的帖子，但没有帮助。我无法在CSS中使用background-image：linear-gradient（）。此外，css中的字体系列也未应用。

*
{
    margin: 0;
    padding: 0;
}
body
{
    font-family: sans-serif;
}
#nav-bar
{
    position: sticky;
    top: 0;
    z-index: 10;
}
.navbar
{
    background-image: linear-gradient(to right, #a517ba, #a5f1782);
    padding: 0 !important;
}
.navbar-nav li a
{
    color: #000 !important;
    font-weight: 600;
}

<!DOCTYPE html>
<html lang="eng">

<head>
    <title>Homepage</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" </script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"  ></script>
    <link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel = "stylesheet" type = "text/css" href = "style.css">
</head>

<body>
    <section id = "nav-bar">
        <nav class="navbar navbar-expand-lg navbar-light">
            <a class="navbar-brand" href="#">Navbar</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ml-auto">
                  <li class="nav-item">
                    <a class="nav-link" href="#">Home</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">About</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">Contact</a>
                  </li>
                </ul>
            </div>
        </nav>
    </section>

    <p>"Hello World!"</p>
</body>
</html>

Answer 1

您拼错了一个十六进制代码。
将带有背景图片的行更改为

background-image: linear-gradient(to right, #a517ba, #a5f1782);

我不确定为什么不使用您的字体，因为它是通用字体系列，但是我也发现了一些其他错误：

第5行出现语法错误
您应将lang属性设置为en而不是eng

Answer 2

您输入的颜色有错字。

background-image: linear-gradient(to right, #a517ba, #a5f1782);
                                                     │       │
                                              HERE ──┴───────┘

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: sans-serif;
}

#nav-bar {
  position: sticky;
  top: 0;
  z-index: 10;
}

.navbar {
  background-image: linear-gradient(to right, #a517ba, #a5f178);
  padding: 0 !important;
}

.navbar-nav li a {
  color: #000 !important;
  font-weight: 600;
}

<!DOCTYPE html>
<html lang="eng">

<head>
  <title>Homepage</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" </script>
    < script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" >
  </script>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <section id="nav-bar">
    <nav class="navbar navbar-expand-lg navbar-light">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item">
            <a class="nav-link" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
          </li>
        </ul>
      </div>
    </nav>
  </section>

  <p>"Hello World!"</p>
</body>

</html>

Answer 3

使用字体系列时，必须使用引号（“”），对于导航栏的问题，是否尝试过使用Boostrap网站的默认导航栏？

背景图像线性渐变不适用于导航栏

3 个答案: