CSS Opacity 没有出现在 Chrome 中，而是出现在 JSFiddle 中

Question

我一直试图让我的菜单在我的本地服务器上显示为透明的。但是，它一直显示为坚实的背景。我将代码加载到 JSFiddle 中，它显示为透明的。我刷新了缓存并切换了浏览器 - 但问题仍然存在。关于发生了什么的任何想法？ （不知道这会不会造成冲突，不过我也在用最新版的Bootstrap）

JSFiddle：http://jsfiddle.net/CJYGb/ 截图（本地）：http://i.imgur.com/WgYFjDA.jpg

代码：

HTML：

<nav role="navigation" class="navbar-home navbar-default">
      <div class="container-fluid">
        <div class="navbar-header"><a href="/" class="navbar-brand"><img src="images/logo.png"></a></div>
        <div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Link</a></li>
            <li><a href="#">Link 2</a></li>
          </ul>
        </div>
      </div>
    </nav>

CSS：

html {
  background: url("http://blog.jimdo.com/wp-content/uploads/2014/01/tree-247122.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.navbar-home {
  margin: 0 auto;
  background: rgba(200,54,54,0.5);
  height: 80px;
  padding: 0;
}
.container-fluid {
  max-width: 1080px;
  height: 80px;
}
.container-fluid a {
  padding: 0;
}
.navbar-default .navbar-nav li {
  padding-right: 10px;
}
.navbar-default .navbar-nav li a {
  font-size: 22px;
  color: #fff;
  margin: 0;
  padding: 0;
  line-height: 80px;
}
.navbar-default .navbar-nav li a:hover {
  color: #151515;
  transition: 1s;
}

Answer 1

我认为这种行为是由于某些background-color 样式应用于主体。 如果有任何规则将background-color 应用于本地服务器中的正文，那么这就是导致问题的原因。

我在正文中添加了background-color:#FFFF，它与您在屏幕截图中的相似

body { background:#FFFFFF; }

带背景颜色的演示：http://jsfiddle.net/lotusgodkk/CJYGb/2/

如果您从 body css 中删除 background-color 或提供 background-color:none，那么您将获得必要的不透明度。

没有背景颜色的演示：http://jsfiddle.net/CJYGb/

Answer 2

为什么不使用透明的 PNG？

.navbar-home {
background-image:url('transparent.png');
background-repeat:repeat;
}