移动标题没有背景色

Question

Helllo，我遇到以下问题：我的标题带有渐变背景。在桌面上，它可以完美运行。在Chrome浏览器中，我检查了它在手机上的外观，看起来还不错，但是在实际的平板电脑和真实的手机标题上，背景是透明的。我不明白为什么。

<!--NAVIGATION MENU -->

<div>
    <nav class="green navbar navbar-expand-lg navbar-light bg-mine w-100 fixed-top" id="banner"  >
        <div class="container"> <a href="#" class="navbar-brand ml-4"><img src="images/logo.png" class="logo"></a>
            <button class="navbar-toggler custom-toggler mr-4"   type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span  class="navbar-toggler-icon" style=""></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item active" ><a class="nav-link menuitem" href="#">Inicio</a></li>
                    <li class="nav-item"><a class="nav-link menuitem" href="index.html#productos">Productos</a></li>
                    <li class="nav-item"><a class="nav-link menuitem" href="tabla.html">Tabla de cultivo</a></li>
                    <li class="nav-item"><a class="nav-link menuitem" href="mailto:info@hemptrading.com">Contacto</a></li>
                </ul>
            </div>
        </div>
    </nav>
</div>

.green{

  width: 100% !important;
       background-image: linear-gradient(to right, rgba(12,76,68), rgba(0,128,75)) !important;
}
.navbar{
    font-weight: 400;
    font-size: 18px;
    padding-top: 10px;
    padding-bottom: 10px;
    height: 100px;
    padding-left: 0px;
    padding-right: 0px;

}

Answer 1

您忘记了rgba中的alpha属性。

rgba（）函数使用Red-green-blue-alpha（RGBA）模型定义颜色。

参考：Article Link

这是下面运行代码的代码。请检查 Link

.green{
  width: 100% !important;
       background-image: linear-gradient(to right, rgba(12,76,68, 1), rgba(0,128,75, 1)) !important;
}
.navbar{
    font-weight: 400;
    font-size: 18px;
    padding-top: 10px;
    padding-bottom: 10px;
    height: 100px;
    padding-left: 0px;
    padding-right: 0px;

}