0

Stackoverflowの優秀な人々が今日私を助けてくれることを願っています-私は基本的に昨夜サッカーを見ながらビールを飲みすぎて、脳が機能しなくなりました。

レスポンシブテーマ、それぞれの上部にH2タグが付いた3列のレイアウトを実行しています。列内の残りのスペースを背景画像で埋める必要があります。下の画像をモックアップして、自分が何をしているのかを示しています。

ここに画像の説明を入力してください

背景がブロックカラーの場合、おそらくH2をインラインで表示し、それに背景色を適用して、含まれているdivの背後にある画像をブロックします。

ご覧のとおり、まだらにされた背景は、テクニックがうまく機能しないことを意味します。テキストの上の明らかな線に注意してください。

ここに画像の説明を入力してください

私はあらゆる種類のことを試みてきました-これを行うためのいくつかの賢い方法があるに違いありません、そしてあなたが私を助けてくれることを願っています！

読んでくれてありがとう！

ロビー。

編集わかりました、最終的に私は以下の2つの答えの組み合わせを使用しましたが、ヘッダータグを2つのdivに分割し、最初の左をフローティングする答えを受け入れました（私はそれを考えていなかったでしょう）。それ自体では機能しませんでしたが、左側のフロートdivに二重線と同じ高さの背景を与え、（要素全体に背景を与えるのではなく）x軸に並べることで、カバーすることができました。テキストの下の行は、背景に不快感を与えることはありません。

画像：

ここに画像の説明を入力してください

HTML：

<h2>
<div class="h2-text">Aha!!</div>
<div class="h2-lines">&nbsp;</div>
</h2>

そしてCSS;

.h2-text {
   padding-right: 5px;
   background: url(../images/footer-lines-overlay.png) repeat-x 0 20px;
   float: left;
}

.h2-lines{
   background: url(../images/footer-h2-lines.png) repeat-x 0 20px;
}

どうもありがとう！！

4

2 に答える 2

1

簡単な解決策は、次の構造を使用して実行されます。

<h1><div><span>The text</span></div></h1>

このスタイルを追加

h1 {
   background: url('the-noise-background'); 
}

h1 div {
   background-image: url('the-double-lined-background');
}

h1 div span {
   padding-right: 20px;
   display: inline-block;
   background: url('the-noise-background') -20px -10px /* Fine tune those pixels so it matches the original position */;
   /* use required line-height and other stuff to full cover the lines */
}
于 2012-06-16T14:35:44.350 に答える
1

バルマーピークをオーバーシュートしました。

とにかく、考えられる解決策の1つは、フローティング要素を使用することです。

<h2>
    <div style="float: left;">My Header Tag</div>
    <div style="background: whatever;">&nbsp;</div>
</h2>

バルマーピーク

于 2012-06-16T14:36:57.427 に答える