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/

如果您从正文css中移除background-color或提供background-color:none，那么您将拥有必要的不透明度。

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

Answer 2

为什么不使用透明的PNG？

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

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

2 个答案: