[英]add background image in active class css 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>
这是活动类的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;
}
现在,它只显示活动课程的白色背景。 但不是图像。 请帮助我。 谢谢
CSS类中的问题。 您已将其分配给适当的选择器。 在分配给标记的html类中,但在CSS中
.nav-tabs>li>a.active { background: #fff url('../image/down.png') right center no-repeat ; }
另外,您也可以尝试-
工作片段
.nav li.active { cursor: default; background: url('https://www.w3schools.com/css/img_fjords.jpg') no-repeat !important; background-size: contain; border: 1px solid #ddd; border-bottom-color: transparent; } .nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover { background-color: transparent !important; }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.