8

純粋なcss（画像なし）で特定の外観を取得しようとしています。

私が持っているものは次のとおりです。

<h2>
    <a>TITLE</a>
</h2>

テキスト「タイトル」には、テキストと同じ幅で高さが異なる黒い背景が必要です。

私はこれをさまざまな順列で試しました：（つまり、リンクのスパン、h2のスパン、h2ディスプレイのインライン、およびブロックのスパン）

<h2 class="title section-title">
    <a href="<?php echo site_url(); ?>/artwork/illustrations" >
        Illustrations<span class="title-bg"></span>
    </a>
</h2>

幅を正しく設定すると、スパンがインライン要素であるため、高さを変更できません。スパンをブロックにして高さを正しくすると、幅を正確にテキストの幅に変更できなくなります。これは、ブロック レベルの要素になり、ページの幅全体に拡張されるためです。

アイデアはありますか、それとも単に画像を使用する必要がありますか?

4

4 に答える 4

10

を使用しdisplay:inline-block;ます。

このフィドルを参照してください。

h2 {
    display:inline-block;
    height:60px;
    background-color:blue;
    color:white;
}
<h2><a>Hello.</a></h2>

于 2012-07-12T16:05:20.807 に答える
2

、およびに適用position: relative;します。次に、 、 、 、およびを適切に設定します。<a>position: absolute;.title-bg <span>topleft0widthheight

このようなもの: http://jsfiddle.net/minitech/3uzbV/

于 2012-07-12T16:04:00.310 に答える
2

私が使用する最も簡単なアプローチはline-height.

h2 a {color:#fff; line-height:40px; display:inline-block; background:#333;}​

ここにjsFiddleがあります。

于 2012-07-12T16:12:07.987 に答える
1

CSS:

a {
    font-size:1em;
    padding:1em 0 1em 0;/*set top and bottom padding to make up extra height*/
    background-color:#063;
}

これを試して。インライン要素にもパディングを設定できます。

于 2012-07-12T16:06:21.377 に答える