CSS（src属性）で要素の画像パスを設定する方法-フロントエンドQ&A-php.cn

ホームページ

ウェブフロントエンド

フロントエンドQ&A

CSS（src属性）で要素の画像パスを設定する方法

PHPz

Apr 21, 2023 am 11:26 AM

CSS (Cascading Style Sheets) は Web デザインに不可欠な部分であり、Web ページに豊かな視覚効果とレイアウトを追加したり、Web ページがさまざまなデバイスで統一されたスタイルを表示できるようにすることもできます。 CSSを利用する場合、要素の画像パス（src属性）をどのように設定するかが重要なポイントとなりますので、以下で詳しく紹介していきます。

相対パス

Web 開発では、Web ページに必要な画像やその他のリソースは通常、同じプロジェクトフォルダーに保存され、相対パスはプロジェクトフォルダーのパス表現。たとえば、Web ページファイルと画像ファイルが同じフォルダーにある場合、相対パスを使用して画像パスを指定できます。

例:

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

ログイン後にコピー

./ は現在のフォルダーを表し、images は画像が保存されているフォルダー、bg.jpg は画像ファイルの名前を表します。このようにして、CSS は画像リソースを正しく読み取り、スタイル効果を実現できます。

さらに、../ を使用して、次のように上位レベルのフォルダーを表すこともできます。

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

ログイン後にコピー

このようにして、CSS は画像内で bg.jpg 画像を検索します。フォルダーの上位にあります。

相対パスの精度は、現在のファイルの場所に依存することに注意してください。現在のファイルがプロジェクトフォルダのルートディレクトリにある場合は、相対パスを使用してプロジェクトフォルダ全体のファイルパスを表すことができます。現在のファイルがプロジェクトフォルダのサブフォルダにある場合は、相対パスを使用する必要があります。現在のファイルの相対パスを参照し、プロジェクトフォルダーへのパスを参照します。

絶対パス

絶対パスは、Web サイトのルートディレクトリに基づくパス表現方法であり、サーバー上の画像の場所を完全に決定できます。絶対パスを使用すると、パスエラーの可能性を減らすことができますが、相対パスよりも複雑になります。

例:

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

ログイン後にコピー

このパスは「/」で始まり、Web サイトのルートディレクトリからの相対パスを示します。 CSS は、Web サイトのルートディレクトリの画像フォルダーに直接移動して、bg.jpg 画像を見つけます。

絶対パスを使用すると、ドメインをまたぐとき (ある Web サイトから別の Web サイトに移動するとき) に問題が発生することに注意してください。これは、他の Web サイトのファイルにアクセスできなくなるためです。現時点では、相対パスまたは他の Web サイトからの参照画像を使用できます。

Base タグを使用する

画像を保存するために Web ページ内に同じレベルのフォルダーが複数あり、これらのフォルダー間を切り替える必要がある場合は、次の操作を行うことができます。 Baseタグを使用します。 Base タグは、リンクやリソースを解析するときに、Base タグで指定された URL に対する相対パスを使用するようにブラウザーに指示する HTML の要素です。

例:

<head>
  <base href="http://www.example.com/images/" />
</head>

ログイン後にコピー

この Base タグは、http://www.example.com/images/ へのパスを指定します。この時点では、CSS 内の画像パスのみを表現する必要があります。このパスに対して相対的です。

例:

background-image: url(bg.jpg);

ログイン後にコピー

このように、CSS は http://www.example.com/images/ で bg.jpg 画像を検索します。

もちろん、Base タグを設定した後は、CSS 内の画像パスだけでなく、HTML 内のリンクも影響を受けます。

要約すると、画像のパスを設定するときは、実際の状況に応じて相対パスまたは絶対パスを選択する必要があります。一般に、相対パスはシンプルで保守が容易であるため、より多く使用されますが、特殊な場合には、パスエラーやクロスドメインの問題を効果的に回避できる絶対パスまたは Base タグの使用も良い選択です。

以上がCSS（src属性）で要素の画像パスを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。