htmlでulタグの背景画像を設定する方法！ ！ _html/css_WEB-ITnose

HTML CSS

1. 問題の背景: HTML では、空白の li が 6 行表示されます (もちろん、表示される行数は独自に定義されます)。その背景画像を設定する方法、背景画像の内容はおそらく次のとおりです。 「まだ必要なものはありません」 データ」 ゆんゆん、

html:

<ul><li class="even"></li><li class="odd"></li><li class="even"></li><li class="odd"></li><li class="even"></li><li class="odd"></li></ul>

css:

ul{background: url("../img/not_result.png") no-repeat scroll left center transparent;}

2. 質問
上記で設定した画像パスは正しいのに、背景が表示されません。解決方法は? ul は背景画像の設定をサポートしていませんか? サポートされている場合、どのように修正すればよいですか? 他の解決策はありますか?

ディスカッションへの返信 (解決策)

画像は li の下に配置する必要があります

li の内容はすべて空であるため、ul の高さは 0 です。より良い方法は、ul の高さを設定することです。 ul に高さを指定します。最小の高さ、つまり min-height を設定します。これにより、コンテンツの実際の高さに影響を与えず、画像を表示できるようになります。

li の内容はすべて空であるため、ul の高さは 0 です。ul の高さを設定できます。より良い方法は、ul の最小高さ、つまり min-height を設定することです。実際のコンテンツの高さを調整し、画像が表示できることを確認してください。

2# と同じである必要があります。子要素 li はフローティングであるか、コンテンツがないため、ul は背景をサポートしていません

ボーダー: 1px の赤
このスタイルを頻繁に使用すると、次のことがわかります。多くの問題があります

ほぼすべての要素が背景をサポートしています

liの高さと幅を見てみてください