背景图像线性渐变在导航栏上不起作用答案

【问题标题】：background image linear gradient not working on navbar背景图像线性渐变在导航栏上不起作用
【发布时间】：2020-06-23 15:13:36
【问题描述】：

我查看了其他一些类似的帖子，但没有帮助。我无法在 CSS 中使用 background-image: linear-gradient() 。另外，css中的font-family没有被应用。

*
{
    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>

【问题讨论】：

lang= 属性的正确值是en，而不是eng。

标签： html css

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

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

【讨论】：