透明导航栏无法在Chrome上运行

Question

我在使用chrome中的导航栏时出现问题。我正在使用bootstrap，但透明度是通过自定义CSS而非bootstrap的{​​{1}}类。

这是导航栏的erb：

transparent

我的<div id="custom-bootstrap-menu" class="navbar navbar-default " role="navigation"> <div class="container-fluid"> <div class="navbar-header"><a class="navbar-brand" href="/">The Manly Art of BBQ</a> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button> </div> <div class="collapse navbar-collapse navbar-menubuilder"> <ul class="nav navbar-nav navbar-right"> <li><%= link_to 'Man Rules', home_site_rules_path, class:"waves-effect waves-light" %></li> <li><%= link_to 'BBQ', home_bbq_path, class:"waves-effect waves-light" %></li> <li><%= link_to 'My Mancard', root_path, class:"waves-effect waves-light" %></li> </ul> </div> <!-- collapse --> </div> <!-- container-fluid --> </div> <!-- custom-bootstrap-menu --> 页面上的内容示例如下：

index

这是导航栏的自定义CSS，包括SASS变量。

SASS变量：

<div class="hero-image-row">
  <div class="hero-image-outer text-center">
    <div class="hero-image-inner text-center">
      <%= image_tag 'Background 1.jpg', class: "hero-image",alt: "Delicious-looking hot dogs on a manly grill. Just like God intended." %>
    </div> <!-- hero-image-inner -->
  </div> <!-- hero-image-inner -->
</div> <!-- row -->

实际的CSS：     / * NAVIGATION * /

 $transparent-black: rgba(0, 0, 0, 0.1);
 $transparent-white: rgba(255, 255, 255, 0.33);

以下内容：

 #custom-bootstrap-menu.navbar {
   margin-bottom: 0px !important;
 }

 #custom-bootstrap-menu.navbar-default .navbar-brand {
    color: black;
}

#custom-bootstrap-menu.navbar-default {
    font-size: 18px;
    font-family: $font-typewriter;
    background-color: $transparent-white !important;
    border: none;
    border-radius: 0px;
}

#custom-bootstrap-menu.navbar-default .navbar-nav>li>a {
    color: black;
}

#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:focus {
    color: black;
    background-color: $transparent-black !important;
}

#custom-bootstrap-menu.navbar-default .navbar-toggle {
    border-color: black;
}

#custom-bootstrap-menu.navbar-default .navbar-toggle:hover,
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus {
    background-color: $transparent-black;
}

#custom-bootstrap-menu.navbar-default .navbar-toggle:hover .icon-bar,
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus .icon-bar {
    background-color: $transparent-black;
}

#custom-bootstrap-menu.navbar-default .navbar-toggle {
  border-color: black !important; /* Change border color around this buttons */
}

#custom-bootstrap-menu.navbar-default .navbar-toggle .icon-bar {
  background: black !important; /* Change color for horizontal lines */
}

透明度在IE上完美运行，但在Chrome中，“margin-top：-50px！important”不会出现，这会使导航栏显示为白色。

如果我将/* HEROS */ .hero-image-row { overflow-x: hidden !important; width: 100% !important; margin-top: -50px !important; -webkit-margin-before: -50px !important; } .hero-image-outer { width: 300%; height: 400px; overflow-y: hidden !important; } .hero-image-inner { width: 66%; overflow: hidden !important; } .hero-image { height: 400px; margin-left: -50%; z-index: 0 !important; } @media screen and (min-width: 700px) { .hero-image-outer { width: 100%; } .hero-image-inner { width: 100%; height: 400px; } .hero-image { width: 100%; height: auto; margin-left: 0%; } } 和随附的margin-top行应用于webkit-margin类而不是.hero-image-outer，则会应用保证金，但透明度仍不起作用，因此它仍然显示为白色导航栏（您可以通过查看图像告诉它向上移动）。

任何熟悉Chrome的人都可以帮我解决这个问题吗？

Answer 1

我相信这就是您所指的：您在透明body后面看到navbar颜色（白色），而不是英雄形象。您可以从技术上将.hero-image-row div更改为display:inline-block，但这最终只会揭示另一个新问题。由于导航栏和英雄图像具有默认定位，您将看到移动切换菜单在打开图像时将图像向下推，这可能不是一个理想的功能。

另一种选择是重构整个英雄形象HTML，因为在移动具有负边距的嵌套图像时，所有溢出隐藏规则也是一个问题。

最简单的做法是将position:absolute应用于navbar，将其从流程中删除。

#custom-bootstrap-menu {
  position: absolute;
  width: 100%;
}

工作示例：

＆＃13;

＆＃13;

@import url(https://fonts.googleapis.com/css?family=Lekton:400,400italic,700);
 #custom-bootstrap-menu {
  font-family: "Lekton";
  background-color: rgba(255, 255, 255, 0.33);
  border: none;
  position: absolute;
  width: 100%;
}
#custom-bootstrap-menu .navbar-nav > li > a,
#custom-bootstrap-menu .navbar-brand {
  color: black;
  font-size: 18px;
}
#custom-bootstrap-menu .navbar-nav > li > a:hover,
#custom-bootstrap-menu .navbar-nav > li > a:focus {
  color: black;
  background-color: rgba(0, 0, 0, 0.1);
}
#custom-bootstrap-menu .navbar-toggle {
  border-color: black;
}
#custom-bootstrap-menu .navbar-toggle:hover,
#custom-bootstrap-menu .navbar-toggle:focus,
#custom-bootstrap-menu .navbar-toggle:hover .icon-bar,
#custom-bootstrap-menu .navbar-toggle:focus .icon-bar {
  background-color: rgba(0, 0, 0, 0.1);
}
#custom-bootstrap-menu .navbar-toggle .icon-bar {
  background-color: black;
}
.hero-image-row {
  overflow-x: hidden;
  width: 100%;
}
.hero-image-outer {
  width: 300%;
  height: 400px;
  overflow-y: hidden;
}
.hero-image-inner {
  width: 66%;
  overflow: hidden;
}
.hero-image {
  height: 400px;
  margin-left: -50%;
  z-index: 0;
}
@media screen and (min-width: 700px) {
  .hero-image-outer {
    width: 100%;
  }
  .hero-image-inner {
    width: 100%;
    height: 400px;
  }
  .hero-image {
    width: 100%;
    height: auto;
    margin-left: 0;
  }
}
@media screen and (max-width: 767px) {
  #custom-bootstrap-menu .navbar-collapse {
    border: none;
    box-shadow: none;
  }
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div id="custom-bootstrap-menu" class="navbar navbar-default navbar-static-top" role="navigation">
  <div class="container-fluid">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder">
        <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="/">The Manly Art of BBQ</a>
    </div>

    <div class="collapse navbar-collapse navbar-menubuilder">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#" class="waves-effect waves-light">Man Rules </a>
        </li>
        <li><a href="#" class="waves-effect waves-light">BBQ </a>
        </li>
        <li><a href="#" class="waves-effect waves-light">My Mancard </a>
        </li>
      </ul>
    </div>

  </div>
</div>

<div class="hero-image-row">
  <div class="hero-image-outer text-center">
    <div class="hero-image-inner text-center">
      <img src="http://www.mybudgettrip.com/south-goa-beaches/slides/03.jpg" class="hero-image">
    </div>
  </div>
</div>

<div class="container">
  <p>1 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
    took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
    sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
    standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the
    printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,
    but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker
    including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled
    it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
    and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since
    the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in
    the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting
    industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic
    typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem
    Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
    took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
    sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
    standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the
    printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,
    but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker
    including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled
    it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
    and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

＆＃13;

＆＃13;

＆＃13;

Answer 2

将一个类opaque-navbar添加到id为“custom-bootstrap-menu”的div中，并将其css写为： -

jarsigner