透明导航栏不适用于 Chrome

Question

我遇到了 chrome 导航栏的问题。我正在使用bootstrap，但透明度是通过自定义 CSS 而不是通过bootstrap 的transparent 类。

这是导航栏的 erb：

<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 页面上的示例：

<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，包括 SASS 变量。

SASS 变量：

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

以及实际的 CSS： /* 导航 */

 #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 */
}

对于以下内容：

/* 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%;
   }
 }

透明度在 IE 上完美运行，但在 Chrome 中 `margin-top: -50px !important' 没有出现，这使得导航栏显示为白色。

如果我将 margin-top 和随附的 webkit-margin 行应用到 .hero-image-outer 类而不是 .hero-image-row 应用边距，但透明度仍然不起作用，所以它仍然显示为白色导航栏（您可以通过查看图像来判断它向上移动了）。

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

Answer 1

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

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

可能最简单的做法是将position:absolute 应用到您的navbar 以将其从流程中全部删除。

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

工作示例：

@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;
  }
}

<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>

Answer 2

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

.opaque-navbar{ background-color: rgba(0,0,0,0.5); }