Question

我正在使用此链接显示的Togglable标签编写HTML页面：http://getbootstrap.com/javascript/#tabs

我需要在文本左侧显示图片作为通知标签文本的一部分＆＃34;通知＆＃34;。

这是我的代码：

<div class="bs-example bs-example-tabs">
    <ul id="myTab" class="nav nav-tabs">
        <li class="active"><a href="#Notifications" style="color:#003300;font-size:25px;background-image:url('HomeIcon.png');display:block;" data-toggle="tab">Notifications</a></li>
        <li><a href="#QC" style="color:#003300;font-size:25px" data-toggle="tab">QC</a></li>
        <li><a href="#MySavedWork" style="color:#003300;font-size:25px" data-toggle="tab">My saved work</a></li>
        <li><a href="#MyLinks" style="color:#003300;font-size:25px" data-toggle="tab">My links</a></li>       
    </ul>
    <div id="myTabContent" class="tab-content">
        <div class="tab-pane fade in active" id="Notifications">
    </div>
</div>

目前，显示的是图像，而不是显示一个图像，图像会被多次复制。

我可以请一些帮助来显示我的图像的一个实例，在文本的左边吗？

提前致谢

Answer 1

如何使用CSS属性：background:url('HomeIcon.png') no-repeat;所以这个img只会出现一次？

您还可以添加放置此图像（背景）的位置（background:url('HomeIcon.png') no-repeat left;， background:url('HomeIcon.png') no-repeat right;等。）。

Bootstrap可切换选项卡图像

1 个答案: