html - 如何使用CSS在右下角的div中添加图像

Question

我目前使用此选项卡使用 bootstrap v3.3.4...CSS:

.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
    color: #fff;
    cursor: default;
    background-color: #92278f;
    border-width: 1px;
    border-style: solid;
    border-color: #92278f;
    -moz-border-top-colors: none;
    -moz-border-right-colors: none;
    -moz-border-bottom-colors: #92278f;
    -moz-border-left-colors: none;
    border-image: none;
}
.nav-tabs {
    border-bottom: 4px solid #92278f;
}

DOM:

<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
    <li class="active"><a href="#parent" data-toggle="tab">Parent</a></li>
    <li><a href="#student" data-toggle="tab">Student</a></li>
</ul>

我当前的输出:

如何添加这张图片:

在底部变成这样？

Answer 1

我已经更新了您的标记以使其与 Bootstrap 相匹配。我将图像添加到内容面板而不是 ul.nav-tabs

不需要为图像添加额外的标记。使用伪元素 :after 完成。

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css">

<!-- Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>

<!-- Loading custom CSS after bootstrap's -->
<style>
  .nav-tabs > li.active > a,
  .nav-tabs > li.active > a:hover,
  .nav-tabs > li.active > a:focus {
    color: #fff;
    cursor: default;
    background-color: #92278f;
    border-width: 1px;
    border-style: solid;
    border-color: #92278f;
    -moz-border-top-colors: none;
    -moz-border-right-colors: none;
    -moz-border-bottom-colors: #92278f;
    -moz-border-left-colors: none;
    border-image: none;
  }
  .nav-tabs {
    border-bottom: 4px solid #92278f;
  }
  /*THE CHANGES I MADE*/
  .tab-pane {
    position: relative;
  }
  .tab-pane:after {
    position: absolute;
    content: "";
    width: 41px;
    height: 23px;
    background: url(http://i.stack.imgur.com/XYs3f.png);
    right: 0;
  }
</style>

<div role="tabpanel">
  <ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
    <li class="active"><a href="#parent" data-toggle="tab">Parent</a>
    </li>
    <li><a href="#student" data-toggle="tab">Student</a>
    </li>
  </ul>
  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="parent">Parent Tab Content</div>
    <div role="tabpanel" class="tab-pane" id="student">Student Tab Content</div>
  </div>
</div>