0

スプライト画像を作成したいのですが、これが私のcssです。

img.Bayern
{
   background: url(Images/Popular.png) no-repeat;
    width: 14px; height: 11px;background-position: 0 0;
}

と私のhtml：

<img class="Bayern"  />

ただし、画像は表示されませんが、cssコードをstyle = ""内に配置すると、正しく機能します。

私はこの同様の質問をチェックしました：スタイル= ""に入れるとCSSコードは機能し、外部cssファイルに入れると失敗します

imgを中に入れました：

<span id="nav-flag">
   <img class="Bayern"  />
   </span>

 #nav-flag img.Bayern { ...same css...}

しかし、それでも機能しません。また、相対パスを../Images、./Images、'...'に変更しました。誰かが私が間違っていることを知っていますか？

4

1 に答える 1

2

背景画像に相対 URL を使用していますImages/Popular.png(つまり、URL が先頭のスラッシュ/や のようなスキームで始まっていませんhttp://)。

このような相対 URL をstyle属性で使用する場合、ブラウザーのアドレス バーに表示される Web ページの要求 URL に対して相対的です。したがって、たとえばhttp://example.com/page.htmlの場合、画像はhttp://example.com/Images/Popular.pngにあると予想されます。

CSS ファイルでこのような相対 URL を使用する場合、それは CSS ファイル自体の要求 URL に対して相対的です。したがって、たとえばhttp://example.com/css/style.cssの場合、画像はhttp://example.com/css/Images/Popular.pngにあると予想されます。

画像ファイルが、指定された URL が期待する場所に正確に存在することを確認する必要があります (したがって、CSS ファイルと同じフォルダーに配置します)。または、URL を適切に修正して、要求に対して適切に相対的になるようにする必要があります。 URL (/Images/Popular.png代わりに使用してください)。

具体<img>的な問題とは関係ありませんが、要素に CSS 背景画像を指定するのは非常に奇妙です。通常、 のようなブロック要素でそれを指定します<div>。

于 2013-01-05T17:17:27.600 に答える