javascript - 在事件类 css bootstrap 中添加背景图片

Question

我正在使用 Bootstrap 选项卡。我想在选项卡上为事件类使用向下箭头。

<ul class="nav nav-tabs" style="font-size:20px;">
                  <li><a  class="active" data-toggle="tab" href="#menu1"><span class="glyphicon glyphicon-sound-dolby"></span></a></li>
                  <li><a data-toggle="tab" href="#menu2"><span class="glyphicon glyphicon-send"></span></a></li>
                  <li><a data-toggle="tab" href="#menu3"><span class="glyphicon glyphicon-earphone"></span></a></li>
                  <li><a data-toggle="tab" href="#menu4"><span class="glyphicon glyphicon-send"></span></a></li>
                </ul>

这里是active类的css。

.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
    color: #555;
    cursor: default;
    background-color: #fff;
    background: url('../image/down.png') no-repeat !important;
    border: 1px solid #ddd;
    border-bottom-color: transparent;
}

现在它只显示事件类的白色背景。但不是图像。请帮助我。谢谢

Answer 1

css类的问题。您将其分配给了适当的选择器。在 html 类中分配给标签，但在 css 中分配给

。您需要正确的 css 规则。所以您的代码将如下所示:

.nav-tabs>li>a.active {
    background: #fff url('../image/down.png') right center no-repeat ;
}