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; 
}