web-dev-qa-db-ja.com

HTMLのURLのsrcパスのレベルを上げる方法は？

ウェブサイトの画像は{root}/stylesに、スタイルシートは{root}/stylesに保存しています。スタイルシートのパスを指定して、指定した画像の画像ディレクトリを検索するにはどうすればよいですか？

例えばbackground-image: url('/images/bg.png');で

htmlcssrelative-path
92
aateeque

..を使用して、親ディレクトリを示します。

background-image: url('../images/bg.png');
167
lonesomeday

../を使用します。

background-image: url('../images/bg.png');

あなたは好きなだけそれを使うことができます。 ../../images/または別の位置、たとえば../images/../images/../images/（もちろん../images/と同じ）

47
ThiefMaster

相対ファイルパスについて知っておく必要があるのは次のとおりです：

  • で開始/はルートディレクトリに戻り、そこから開始します

  • で始まる../は1つのディレクトリを後方に移動し、そこから開始します

  • で開始../../は2つのディレクトリを後方に移動し、そこから開始します（など）。

  • 前方に移動するには、最初のサブディレクトリから始めて、前方に移動し続けます。

詳細については、 here をクリックしてください！

40
S.Akruwala

Chromeでは、HTTPサーバーからWebサイトを読み込むときに、絶対パス（/images/sth.pngなど）と上位レベルディレクトリへの相対パス（../images/sth.pngなど）の両方が機能します。

しかし！

（Chromeで）ローカルファイルシステムからHTMLドキュメントを読み込むと、現在のディレクトリより上のディレクトリにアクセスできません。つまり../something/something.sthにアクセスすることはできず、相対パスを絶対パスに変更するか、他の方法で解決することはできません。

8
jaboja

次のファイル構造があると仮定します。

-css
  --index.css
-images
  --image1.png
  --image2.png
  --image3.png

CSSでは、たとえばimage1行を使用して、../images/image1.pngにアクセスできます。

NOTE：Chromeを使用している場合、動作しない可能性があり、ファイルが見つからないというエラーが表示されます。私は同じ問題を抱えていたので、私はただChromeからキャッシュ履歴全体を削除しましたで、うまくいきました。

0
A.Tressos