Bootstrap 3：如何编码我的横幅？

Question

有没有人对如何在我的横幅底部放置一个小图片有任何建议？看到这个附件（用红色圈出）来了解我在说什么。我可以使用CSS3做到这一点，还是我最好只在那里放置图像？如果该图像可以根据每页的标题文本的长度（例如“我们的能力”）进行调整，那将是很好的。可以在以下位置查看整个HTML： HTML link和绿色图片位于：Green Image

我的HTML代码：

<section class="page-top">
    <div class="container">
                <h2><em><strong>OUR CAPABILITIES</strong></em></h2>
    </div>
</section>

我的CSS代码：

section.page-top {
background-color: #161616;
border-top: 5px solid #35557c;
border-bottom: 5px solid #97c05a;
margin-bottom: 35px;
min-height: 50px;
padding: 20px;
position: relative;
text-align: left;

}

和

section.page-top h2 {
color: white;
font-weight: 700;
background-color: #97c05a;
display: inline-block;
padding: 7px 9px;
height: 50px;
-webkit-border-radius: 15px 1px 15px 1px;
-moz-border-radius: 15px 1px 15px 1px;
border-radius: 15px 1px 15px 1px;

}

Answer 1

您可以将:after与position:absolute和background-size一起使用，以便根据内容调整图片大小：

section.page-top h2 {
    position:relative; /*Add this to your h2*/
}

section.page-top h2:after {
    content: '';
    width: 100%;
    height: 12px;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 30px;
    background: url(http://www.ogmda.com/test/bar.png) no-repeat right center;
    background-size: cover;
}