5

<li>3つすべてを左に浮かせて、それぞれに特定の画像の背景があるサイトを作成しています。それぞれにテキストがあり、<li>そのテキストを移動して、背景ではなく背景の下に表示されるようにします。この種のレイアウトのCSSはどうなりますか？

以下に、レイアウトの例を示します。助けてくれてありがとう。

====== ====== ======
| | | | | |
| | | | | |
==================
  テキストテキストテキスト

私はアスキーアートのスキルを持っていませんが、うまくいけばあなたはそのアイデアを理解するでしょう。

4

5 に答える 5

4

margin-top背景画像の高さと同じスパンでテキストを設定します。これが機能するには、スパンが必要display: blockです。または、さらに良いpadding-topことに、背景画像の高さと同じに設定しbackground-image-repeat: no-repeatます。

実用的な例については、 http：//jsfiddle.net/77NdE/を参照してください。

于 2012-05-23T16:36:55.647 に答える
2

高さを固定サイズに設定していると仮定します。その場合はpadding-top、画像の高さと同じになるように設定できます。同じである限り、background-repeat以下no-repeatのコメントが表示されます。

例： http： //jsfiddle.net/qTB8E/

于 2012-05-23T16:41:43.600 に答える
1

テキストと背景の両方に対応できるように、divの高さを増やします。背景を繰り返しなしに設定し、テキストにパディングトップを付けます。

于 2012-05-23T16:38:22.353 に答える
1

li要素に固定の高さを指定できます。高さは、「使用中の背景画像の高さ」+「その下にあるテキストに必要な高さ」になります。次に、背景画像の高さに等しいli要素の上部にパディングを適用します。

背景画像の高さが14ピクセルで、その下のテキストが12ピクセルであるとします。それで、

li
{
height: 26px; /* 14 + 12 */
background-image: url(path/to/image);
background-position: top;
background-repeat: no-repeat; /* you can even repeat x if required */
padding-top: 14px;
}
于 2012-05-23T16:40:27.610 に答える
0

疑似クラスで試してみてください

<ul>
<li id="background"></li>
<li>Text</li>
<li id="background"></li>
<li>Text</li>
<li id="background"></li>
<li>Text</li>
</ul>

CSS

ul {}
ul li:nth-child(even) {padding-top:20px}

したがって、毎秒（すべての偶数）のli要素には、上から20pxのパディングがあります（li-backgroundの高さ以上に変更します）。「even」を「odd」に変更して、すべての奇数を揃えます。あなたが私が何を意味するのか理解できることを願っています:)

于 2012-05-23T16:47:13.917 に答える