0

バナーの下部に小さな画像を配置する方法について誰かアドバイスはありますか? 私が話していることのアイデアを得るには、この添付ファイル (赤丸で囲んだ部分) を参照してください。CSS3 を使用してこれを行うことはできますか? または、そこに画像を配置するだけのほうがよいでしょうか? その画像が各ページの見出しテキスト (例: 「私たちの能力」) の長さに合わせて調整できれば素晴らしいと思います。HTML 全体は次の URL で表示できます: HTML リンクと緑色の画像は次の場所にあります: 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;

}

4

1 に答える 1

0

とを使用:afterして、コンテンツに合わせて画像のサイズを変更できます。position:absolutebackground-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;
}
于 2013-10-19T20:08:54.563 に答える