css - Bootstrap 3 : How to code my banner?

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