使用CSS替换Logo

Question

我的问题是，它并没有取代标志本身，我已经尝试了几天来解决这个问题，在我的一些业余时间(我是新的，因此它已经这么长)。

不知道如何解决这个问题。

下面的代码和图像提供了更多细节：

.navbar-brand {
    width:200px;
    height:200px;
    box-sizing:border-box;
    padding-left: 200px;
    /*width of the image*/
    background: url(https://web.archive.org/web/20180921071933im_/https://www.rolimons.com/images/logo-56x56.png) left top no-repeat;
}

第一个R标志应该取代第二个R标志，而是创建一个单独的R标志

​

​

Answer 1

没有看到您的HTML，我猜.navbar-brand中有一个子元素。因此，当您添加背景图像和填充-左，您是为您的新标志，但旧的一个仍然在那里。

如果您检查徽标区域，我敢打赌您有一个img元素、另一个元素或一个伪元素，您必须将这些元素样式或隐藏如下：

风格：

.navbar-brand .some-other-element-class {
    width: 200px;
    height: 200px;
    box-sizing: border-box;
    padding-left: 200px;
    /*width of the image*/
    background: url(https://web.archive.org/web/20180921071933im_/https://www.rolimons.com/images/logo-56x56.png) left top no-repeat;
}

隐藏：

.navbar-brand img {
    display: none;
}

.navbar-brand::after {
    display: none;
}

编辑

我认为您的站点是基于图像url的https://www.rolimons.com/，如果是的话，那么我的假设是img标记作为.navbar-brand的子标签是正确的。

如果您想要“新”徽标取代旧徽标，您可以使用上面的隐藏技术，但是如果您可以更改，那么替换img src可能是更好的前进之路。

Answer 2

如果要用CSS替换徽标，可以隐藏旧徽标图像，并将新徽标图像设置为背景图像。

<div id="logo_outer">
  <img src="Logo.png">
</div>


<Style>
#logo_outer {
    width: 200px;
    height: 200px;
    background-image: url(img url );
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto;
}

#logo_outer img {
    display: none;
}
</style>