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

Question

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

我的 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

您可以使用:afterwithposition: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;
}