html - 移动标题没有背景颜色
问题描述
你好,我有以下问题:我有渐变背景的标题。在桌面上它可以完美运行。当在 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;
}
解决方案
你忘了在 rgba 中提到 alpha 属性。
rgba() 函数使用 Red-green-blue-alpha (RGBA) 模型定义颜色。
参考:文章链接
这是运行代码下面的代码。请检查 链接
.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;
}
推荐阅读
- java - 如何从一个类调用截图方法到另一个类?导航到我的代码后如何截取主页的截图?
- python - 如何制作接受元组输入的Python函数?
- wordpress - Wordpress Varnish vcl 配置
- html - 我怎样才能让父母
- c# - .NET 中的 TCP 套接字分片
- php - 如何在 Laravel 中获取图片 URL
- javascript - 代理地址在 react-native 客户端中不起作用
- php - 将数组填充到 php codeigniter 中的下拉列表
- reactjs - 操作深度嵌套的 React 组件
- javascript - Angularjs切换开关无法通过该站点工作