用于覆盖背景颜色和图像的导航栏
问题1:我想让我的导航栏附加覆盖在背景颜色之上&；div（顶部横幅）的背景图像，现在当我向下滚动时。背景颜色将覆盖我的导航栏词缀。
我如何实现这样，我的导航栏将在我的背景颜色之上的div类顶部横幅。
还有一个问题是我的导航栏上留有余量，当我添加数据间谍词缀时，导航栏稍微向右移动，导致左侧留有空白，当我将屏幕重新调整到较小的设备尺寸时，导航栏折叠菜单是不可点击的，除非我稍微点击最右边，然后切换菜单。我不知道为什么词缀会出现这样的问题。我该怎么修好它。
感谢您帮助解决这个问题！！
下面是我的代码
<html>
<head>
<title>Demo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
.navbar-header,
.navbar-brand {
line-height: 100px;
height: 100px;
padding-top: 0;
}
.affix .navbar-default {
position: fixed !important;
top: 0 !important;
width: 100% !important;
background-color: #957595 !important;
}
.affix {
width: 100% !important;
}
@media screen and (min-width: 768px) {
.navbar-header {
padding-left: 200px;
text-align: center;
}
}
.top-banner{
background-color: #b0c4de;
background-image: url("bi-uk-office7-2.jpg");
background-repeat: no-repeat;
background-position: right top;
}
</style>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<!-- Static navbar -->
<div id="nav" data-spy="affix">
<nav class="navbar navbar-default" style="background-color:black;background: rgba(0,0,0,0.9);">
<div class="container-fluid">
<div class="navbar-header header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logo</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#"><font color="white">Link 1</font></a></li>
<li><a href="/list"><font color="white">Link 2</font></a></li>
<li><a href="/list"><font color="white">Link 3</font></a></li>
</div><!--/.nav-collapse -->
</div>
</nav>
</div>
<section>
<div class="col-xs-12">
<div class="top-banner">
Hello world<br/>
Hello world<br/>
Hello world<br/>
Hello world<br/>
Hello world<br/>
Hello world<br/>
Hello world<br/>
Hello world<br/>
Hello world<br/>
Hello world<br/>
Hello world<br/>
Hello world<br/>
<hr>
</div>
</div>
</section>
</div>
</body>
</html>
共有1个答案
在您的#nav中添加一个z-index，如下所示，使其位于顶部，并将Margin-Left属性添加到该属性，使其在从其父级Container-Fluid获取填充时保持在最左侧
#nav
{
z-index:1000;
margin-left: -15px;
}
-
问题内容： 我有一个。当用户悬停div时，我想用rgba颜色（）覆盖背景图像。 我想知道是否有一个一格解决方案（即没有多个div，一个用于图像，一个用于颜色，等等）。 我尝试了多种方法： 而这个CSS： 我看到的唯一选择是制作另一个具有覆盖层的图像，使用JavaScript预加载然后使用。但是，我想要一个仅CSS的解决方案（更整洁；更少的HTTP请求；更少的硬盘）。有没有？ 问题答案： Peter
-
问题内容： 假设我要在CSS中渲染箭头，箭头应具有头部，尾部和灵活的宽度，以便可以包含文本。我当然可以创建多个div来获得所需的内容，但是如何在CSS3中完成呢？ 我可以使用多个背景图片： 的HTML： 这给了我一个带有箭头和尾巴的透明中间部分。似乎不可能在中间部分指定颜色。 仅使用一张背景图像，您可以执行以下操作： 我知道这在很多方面都是可行的，但是背景颜色属性是否真的从速记定义中丢失了？ 问题
-
我正在构建一个聊天应用程序，当我向用户发送一个图像时，图像并没有覆盖我给出的背景，而是给出了顶部和底部的有线填充。如何解决这个问题。我给出的填充是每边7dp，这里是我的代码
-
我想改变文本（和图标）的颜色基于背景图像的可见性。 我尝试过：使用palette_generator包检查背景图像的主要颜色，并使用flutter_statusbarcolor包中的WhiteForGroundForColor函数（返回一个bool）为我的文本（和图标）颜色选择黑色或白色。 问题是：有时主色变成空。在我的测试中，这种情况发生在黑色和白色，我不知道有什么方法可以找出哪一种。 我为其他
-
博览会允许更改StatusBar的颜色和其他方面（在屏幕顶部）。 我没有看到任何关于修改导航栏（屏幕底部）背景颜色以匹配任何地方的内容。无需分离即可实现此功能吗？：
-
问题内容： 是否可以在Internet选项的“高级”选项卡中不启用“打印背景色和图像”的情况下打印背景图像？ 我认为可以使用没有“背景图像”的替代方法…使用div标签和绝对位置可以模拟背景图像的相同效果吗？我也想在页面上重复背景图像。 问题答案： 打印背景图像（在标记中指定为背景图像的那些图像）的能力完全取决于最终用户，您无法从代码中以编程方式控制此功能。Firefox的一个插件提供了JavaSc
-
我正在尝试设置的背景色。我正在尝试使用以下代码添加 （部分来自 SwiftUI 教程）。然而，它只会是白色的，除非我用替换 我可以设置单个列表项的颜色，但我希望整个背景显示蓝色
-
我的导航栏有一个白色背景，但在登录页上它应该是透明的，当我向下滚动时它应该是白色的，在其他页面上它应该是白色的。 我使用的代码来自：滚动后更改导航栏颜色？ 编辑： 所以我在下面的答案中添加了一个小提琴，但不知何故它不起作用 https://jsfiddle.net/jy6njukm/ 这是我的代码： javascript: 这里是我的navbar css： 我有我的导航栏html只有 我的home