css - ハードディスクからのCSSイメージ

Question

GUI を構築しようとしていますが、css を介して背景画像として画像を読み込もうとしています。私の HTML シートは、見出しと、JAVA と Google Web Toolkit で構築された GUI をロードする div コンテナを除いて、ほとんど空です。

背景画像をインターネットから読み込むと、うまくいきます。

.Bild {
    background: url("http://developer.aldebaran-robotics.com/media/img/home/nao_h25.png")
    no-repeat
    center;
}

しかし、今はハードディスクからロードしたいのですが、プロジェクト内のフォルダーからロードしたいと思っています。構造は次のようになります。

ワークスペース → プロジェクト → war → css ファイル

ワークスペース → プロジェクト → 画像 → image.png

相対パスを使用して試しました。正しくやったかどうかはわかりません。それは動作しません:

.Bild {
    background: url(/images/image.png)
    no-repeat
    center;
}

あなたが私を助けることができると確信しています！

どうもありがとう

score 2 · Accepted Answer

css ファイルに相対的な画像ファイルのパスを指定する必要があります。ディレクトリ構造の例を見てみましょう。

workspace/
 project/
   war/
      cssfile.css
   images/
      image.png

css ファイルからの相対イメージパスは、次のようにする必要があります。

../images/image.png

.Bild {
    background: url(../images/image.png)
    no-repeat
    center;
}

Here:..は、現在のディレクトリの 1 つ上のディレクトリを意味します。を使用../../して、2 つのディレクトリを上に移動できます。

相対パスを確認するには、共通の親ディレクトリまで移動してから、メディアファイルの場所まで下に移動する必要があります。この場合、共通の親ディレクトリは 1 レベル上にあるため、これ../で十分であり、ディレクトリ構造をたどりimages/image.pngます。

score 0 · Accepted Answer

構文に問題はありません。したがって、問題はパスにあるはずです。URL をスラッシュで始めることにより/、

/images/image.png

の絶対位置を意味する

http://some-host-name/images/image.png

それがあなたのイメージですか？

2 に答える 2