Question

我有两个非常相同的模板，除了一些颜色变化，图像更改。当屏幕宽度低于767px时，我有移动导航按钮。它们只出现在这个尺寸之下。

我的一个按钮有透明背景，另一个没有。我看了，两张图片都有背景透明度。我需要带有白色背景的按钮才能拥有透明背景。看起来它可能是包含具有背景的按钮的元素。这两个模板的CSS几乎相同。我不确定为什么一个问题而另一个问题不存在。我已经发布了截图链接来说明我的问题。

截图：

带有白色背景的按钮（错误）：http://prntscr.com/34ljql

具有透明背景的按钮（正确）：http://prntscr.com/34llwk

HTML：

<p class="pull-left visible-xs" id="mobile-nav-button-container">
    <button type="button" class="btn btn-xs" data-toggle="offcanvas" id="thief-river-falls-mobile-btn">
        <img src="/_images/layout/thief-river-falls-mobile-btn.png" />
    </button>
</p>

CSS：

#mobile-nav-button-container{
   margin-top: 10px;
}

#thief-river-falls-mobile-btn{
  background-color: rgba(0,0,0,0);
  border: none;
}

URLS：

问题：http://sevenclanscasino.designangler.com/thief-river-falls/thief-river-falls-home

正确：http://sevenclanscasino.designangler.com/warroad/warroad-home

Answer 1

#thief-river-falls-mobile-btn {
   background: transparent;
}

这对我有用。

Answer 2

在实际网站中，该课程为

#thief-river-falls-mobile-btn{
 border: none;
}

您尚未添加

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

简单地添加这个就解决了我的问题..

Answer 3

菜单按钮有padding，导致按钮两侧出现``background-color。试试这个

#thief-river-falls-mobile-btn {
   padding:0;
   margin-left:5px;
}

或为此

设置透明背景颜色

#thief-river-falls-mobile-btn {
   background-color:rgba(0,0,0,0);
}

两个模板一个按钮具有透明背景，另一个没有

3 个答案: