新手上路，请多包涵

我是引导程序的新手。这是我正在尝试制作的设计：

如您所见，导航栏位于背景图像的顶部。这就是我所拥有的：

  <!DOCTYPE html>
    <html lang="en">
    <head>
               <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<style>
        <style>
.navbar-default {
background: none;
border: none;
}

body{
    height:100%;
}
        html{
            background: url('sun.jpg') no-repeat center center fixed;
            -webkit-background-size:cover;
            -moz-background-size:cover;
            -o-background-size:cover;
            background-size:cover;
            background-position: 0 0;

        }
        </style>

    </head>
<body>

        <nav class="navbar navbar-default">
            <div class="container">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">home</a></li>
                    <li><a href="#">ask a question!</a></li>
                    <li><a href="#">learn</a></li>
                    <li><a href="#">contact</a></li>
                </ul>
            </div>

        </nav>

</body>
</html>

给出：

我不知道如何将它放在图像本身而不是上面。

简短的问题：是什么让来自 vimeo 的图片看起来比我使用的太阳图片好得多？在我的图像上，您可以看到所有像素等…这是因为它可能是一个太小的图像并且必须拉伸很多以适合整个页面吗？

编辑：

这是我试过但没用的

    <nav class="navbar navbar-default">
        <div class="container">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">home</a></li>
                <li><a href="#">ask a question!</a></li>
                <li><a href="learn.html">learn</a></li>
                <li><a href="#">contact</a></li>
            </ul>
            <style>
            .navbar{
                background:transparent;
            }
            </style>
        </div>

    </nav>

原文由 LandonZeKepitelOfGreytBritn 发布，翻译遵循 CC BY-SA 4.0 许可协议

html css bootstrap bootstrap-4

阅读 1.1k

2 个回答

得票最新

社区维基

发布于
2022-12-19

✓ 已被采纳

引导程序 4

导航栏没有背景颜色，因此默认情况下它是透明的。请记住使用 navbar-light 或 navbar-dark 以便 链接颜色 与背景图像的对比度配合使用。切换器的显示也基于 navbar- (dark or light) 。

https://www.codeply.com/go/FTDyj4KZlQ

 <nav class="navbar navbar-expand-sm fixed-top navbar-light">
    <div class="container">
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar1">
            <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-brand" href="#">Brand</a>
        <div class="collapse navbar-collapse" id="navbar1">
            <ul class="navbar-nav">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Link</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

引导程序 3

使用 navbar-fixed-top 然后更改 CSS 使其透明。这是自定义透明导航栏的示例。 http://www.codeply.com/go/JNy8BtYSem

   <nav id="nav" class="navbar navbar-fixed-top" data-spy="affix">
    <div class="container">
        <div class="navbar-header">
      <a href="#" class="navbar-brand">Brand</a>
      <a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <i class="fa fa-bars"></i>
      </a>
      </div>
      <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
        </ul>
        <ul class="nav pull-right navbar-nav">
          <li>
           <a href="#">Link</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

本题只是为了让Navbar透明。 要在滚动后或在某个导航栏位置更改样式，请参阅： Animate/Shrink NavBar on scroll using Bootstrap 4

原文由 Zim 发布，翻译遵循 CC BY-SA 4.0 许可协议

社区维基

发布于
2022-12-19

您需要从导航栏中删除背景：

 .navbar-default {
    background: none;
}

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<style>
html,
body {
  height: 100%;
	background: red;
}

.navbar-default {
    background: none;
  	border: none;
}
</style>

<!-- Wrap all page content here -->
<div id="wrap">

  <!-- Fixed navbar -->
  <div class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Project name</a>
      </div>
      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#contact">Contact</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li class="dropdown-header">Nav header</li>
              <li><a href="#">Separated link</a></li>
              <li><a href="#">One more separated link</a></li>
            </ul>
          </li>
        </ul>
      </div><!--/.nav-collapse -->
    </div>
  </div>

</div>

原文由 Turnip 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

bootstrap - 如何将导航栏放在背景图片之上？

你尚未登录，登录后可以

如何自定义设置虚线边框的样式？

怎么把一个矩形div变成一个直角三角形？

怎么去掉聚焦文字处的光标竖线？

Web 上的室内导航效果是如何实现的呢？

只用一个div，宽高固定，文本内容不固定，能不能实现水平、垂直居中，超出两行显示省略号？

浏览器可以直接解析scss文件了吗？

Flask中static文件夹下的本地图片无法在HTML页面加载怎么办？

Stack Overflow 翻译