4

誰でも助けてください。

私は HTML と CSS の知識を新たにしています (これらの言語を使用してから 4 年が経ちました)。フォルダー構造内の画像を参照するのに問題があります。同封の画像は、私のプロジェクト用のフォルダー構造を示しています。ここに画像の説明を入力

私がやりたいのは、CSS フォルダーの index.css ファイルから、次のコード行を使用して、Images フォルダーから画像 Logo 1.png にアクセスし、背景として使用することです。

body 
{
    background-color: #FFFEF0;
    background-image: url(./Images/Logo 1.png);
}

ただし、これは機能していないようです。画像が表示されません。../Images/Logo 1.png も試しましたが、これもうまくいきません。index.html から、./Images/Logo 1.png を使用して Images フォルダーから表示する画像を取得できます (../ vs ./ に注意してください)。

私はこれを正しい方法で行っていますか？相対パスの参照についてGoogleで掘り下げましたが、素晴らしい例はありませんでした。

誰が私がこれで間違っているのか教えてもらえますか?

4

5 に答える 5

5

URL にスペースが含まれている場合は、参照を引用符で囲み、スペース文字を%20次のように置き換える必要があります。

background-image: url('../Images/Logo%201.png');
于 2012-06-13T10:31:29.460 に答える
1

2 つのドットを追加して、フォルダー内で 1 レベル上に移動します。したがって、あるフォルダーに画像があり、別のフォルダーに css がある場合は、1 レベル上に移動してから画像フォルダーに移動する必要があります。例:

background-image: url(../Images/Logo 1.png);

ファイル名にスペースを使用すると問題が発生する場合もあります。代わりにアンダースコアを使用してみてください:-)

于 2012-06-13T10:33:07.760 に答える
1

css で画像を使用する場合は、css ファイルに関連するソース ファイルを配置する必要があるため、次のような構造の場合:

index.html
css
  style.css
images
  background.jpg

CSS は次のようになります。

background: url(../images/background.jpg);

また、ファイル名にスペースを使用しないでください。

于 2012-06-13T10:33:42.487 に答える
1
  1. .. を使用して、ディレクトリ内の 1 レベル上に移動します
  2. URL を引用します (オプションですが、最適なクロスブラウザー サポートのために推奨されます)
  3. スペースは使用せず、代わりにアンダースコアを使用してください

  4. 物事を単純化するための良い習慣: フォルダーとファイルは小文字です。

    背景画像: url("../images/logo_1.png");

于 2012-06-13T10:33:53.070 に答える
0

2 つの問題。まず、URL の内容は次のように引用符で囲む必要があります。

background-image: url("../Image/Logo 1.png");

2 番目の単一のドットは、css ファイルが置かれている現在のディレクトリへのリファラーであるため、「./Image/Logo 1.png」を使用すると、CSS フォルダー内で image というフォルダーを見つけようとしました。ファイル ディレクトリ内のレベルを上げるには、2 つのドット ("..") を使用する必要があります。HTMLにcssファイルが正しく含まれていると仮定すると、これで修正されるはずです。

于 2012-06-13T10:39:18.843 に答える