导航栏背景图像不透明

Question

我有一个图像，它是一个底部为半圆形的正方形。该图像具有透明背景，我想将其设置为导航栏的重复背景，从而产生树冠的效果。

我在查看我的网站时看到图像的透明部分不是透明的，它们是 white.Why 我可以看不到我的网站背景吗？

具有透明背景的背景图像

生成的导航栏

css

  .navbar-default {
        box-shadow: none;
        border: 0;
        margin-bottom:0; 
        background-image: url('../img/navbarbackground.png');
        font-family: angsannaUPC;
    }

html
切换导航 M.F.O'Hare & Associates-->

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
              <ul class="nav navbar-nav navbar-center">
                <li><a href="/projects.html">Cakes</a></li>
                <li><a href="/services.html">Buns</a></li>
                <li><a href="/aboutus.html">About us</a></li>
                <li><a href="/contactus.html">Contact us</a></li>
              </ul>
            </div><!-- /.navbar-collapse -->
          </div><!-- /.container-fluid -->
        </nav>
    </div>
</div>

Answer 1

可能是您的导航栏背景不透明。图像可能是透明的，但至少它后面的一层，导航栏 div 或流体容器不是。

Answer 2

得到吉尔克里斯特的答复，谢谢。导航栏的背景不透明。将此添加到 css 解决了问题。

   background-color: rgba(0,0,0,0.0);

导航栏背景图像不透明

navbar background image not transparent

html

image

navbar

twitter-bootstrap