如何在黑色标题中放置带有透明背景的白色徽标图像？

Question

我的目标是在标题中看到实际徽标，而不是白色矩形。

我有一个Rails应用程序，黑色标题高约100px。我有一个透明背景的白色品牌标志。

也使用Bootstrap。当我把图像放在标题中时，我看到的只是一个白色的盒子。当然，图像可能存在，但你无法看到它。

我的图片设置ID为＆＃34;品牌形象＆＃34;：

    <a class="navbar-brand" href="/">
      <%= image_tag 'My-logo-PMS-C-REV.png', id: "brand-image" %>
    </a>

CSS是：

#brand-image{
  height:50px;
  background-color:black;
}

我甚至无法弄清楚最简单的CSS。事实证明，CSS对我来说总是非常困难和不直观。

Answer 1

您是否尝试过使用倒置导航栏？它有一个黑色或几乎黑色的背景，以

开头

http://getbootstrap.com/components/#navbar-inverted

.navbar-inverse {
  background-color: #222;
  border-color: #080808;
}

非倒置版本的背景几乎为白色。 http://getbootstrap.com/components/#navbar-brand-image

.navbar-default {
  background-color: #f8f8f8;
  border-color: #e7e7e7;
}

您使用的是任何引导主题吗？

周围的<a>标签可能比图片大，这就是图片上的ID似乎没有任何效果的原因;但我需要看到绝对确定的页面。

您是否可以提供图像链接或标题代码的更大样本？