时间戳

首页 > 解决方案 > 背景图像线性渐变在导航栏上不起作用

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

问题描述

我查看了其他一些类似的帖子，但没有帮助。我无法在 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>

标签： htmlcss

解决方案

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

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

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

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

推荐阅读