15

私のCSSの中には、次のものがあります。

#framecontentトップ{
位置: 絶対;
上: 0;
左: 120px;
右: 0;
高さ: 100px;
オーバーフロー: 非表示;
background-image: url(/Users/myname/Website Project/logo.jpg);
色: 白;
}

背景画像として使用したい画像へのパスは /Users/myname/Website Project/logo.jpg です

ただし、ID framecontentTop を使用して div を配置すると、画像 (または実際には何も) が背景として表示されません。CSS には競合する他の div はありません。framecontentTop の背景を色に設定するか、画像として保持し、URL をランダムな画像としてオンラインにすると、正常に読み込まれます。したがって、問題は画像へのパスを指定した方法にあるとしか思えません-ここで私が間違ったことを誰でも見ることができますか?

どうもありがとう

4

3 に答える 3

33

特殊文字がある場合は、エスケープするか、空白の場合は少なくとも次のように引用する必要があります。

background-image: url("/Users/myname/Website Project/logo.jpg");

完全な要件については、 W3C 仕様を参照してください。

かっこ、コンマ、空白文字、一重引用符 (')、二重引用符 (") など、引用符で囲まれていない URI に現れる一部の文字は、結果の URI 値が URI トークン '(' になるようにバックスラッシュでエスケープする必要があります。 , ')', '\,'.

于 2010-03-08T22:41:50.697 に答える
6

サーバー上の同じ URL に常に解決される絶対パスを使用しています。要素 A に配置すると機能するが、要素 B では機能しない場合、問題は URL ではなく、別の設定backgroundまたはbackground-image干渉である可能性があります。

Firebug の「Inspect Element」機能を使用して、優先される別の背景設定があるかどうかを調べます。

ちなみに、スペースを含む URL は常に引用符で囲む必要があります。

background-image: url("/Users/myname/Website Project/logo.jpg");
于 2010-03-08T22:40:44.907 に答える
1

JavaScript で要素を処理している場合は、次のように""を追加するだけです。

element.style.backgroundImage = 'url(' + '"' + imageUrlVariable + '"' + ')';

注： Angularでタイプスクリプトを処理している場合、明らかにこのソリューションも利用できます

于 2020-07-28T10:57:15.057 に答える