url()

url()CSS 関数で、ファイルを含めるために使用します。引数は絶対 URL、相対 URL、 データ URI の何れかです url() 関数は attr() 関数のように、他の CSS 関数に引数として渡すことができます。値を使用するプロパティに応じて、求められるリソースは画像、フォント、スタイルシートの何れかになります。 url() 関数表記は the <url> データ型の値になります。

/* 単純な使い方 */
url(https://example.com/images/myImg.jpg);
url(data:image/png;base64,iRxVB0…);
url(myFont.woff);
url(#IDofSVGpath);

/* 関連するプロパティ */
background-image: url("https://mdn.mozillademos.org/files/16761/star.gif");
list-style-image: url('../images/bullet.jpg');
content: url("pdficon.jpg");
cursor: url(mycursor.cur);
border-image-source: url(/media/diamonds.png);
src: url('fantasticfont.woff');
offset-path: url(#path);
mask-image: url("masks.svg#mask1");

/* 代替付きのプロパティ */
cursor: url(pointer.cur), pointer;

/* 関連する一括指定プロパティ */
background: url('https://mdn.mozillademos.org/files/16761/star.gif') bottom right repeat-x blue;
border-image: url("/media/diamonds.png") 30 fill / 30px / 30px space;

/* 他の CSS 関数の引数として */
background-image: cross-fade(20% url(first.png), url(second.png));
mask-image: image(url(mask.png), skyblue, linear-gradient(rgba(0, 0, 0, 1.0), transparent);

/* 一括指定ではない複数の値の一部として */
content: url(star.svg) url(star.svg) url(star.svg) url(star.svg) url(star.svg);

/* @-規則 */
@document url("https://www.example.com/") { ... } 
    

@import url("https://www.example.com/style.css");
@namespace url(http://www.w3.org/1999/xhtml);

相対 URL が使用された場合は、 (ウェブページの URL からではなく) スタイルシートの URL からの相対となります。

url() 関数は background, background-image, list-style, list-style-image, content, cursor, border, border-image, border-image-source, mask (en-US), mask-image, @font-face ブロック内での src, @counter-style/symbol (en-US) 値として使用することができます。

CSS 第1水準では、 url() 関数表記は真に URL のみが記述されていました。 CSS 第2水準では、 url() の定義は任意の URI に広げられ、 URN を含むようになりました。 CSS Values and Units 第3水準では再び狭められ、 url() は真に <url> のみを記述するようになりました。

構文

<string>
<url>
含まれるウェブリソースへの相対アドレス、絶対アドレス、ポインターのURL、またはデータ URI であり、任意で単一引用符または二重引用符を使用することができます。 URL に括弧、空白、引用符が含まれている場合で、これらの文字がエスケープされていないか、アドレスに 0x7e 以上の制御文字が含まれている場合、引用符は必須です。二重引用符は二重引用符の中に入れることはできず、単一引用符はエスケープされない限り単一引用符の中に入れることはできません。以下のものはすべて有効であり、同等です。
<css_property>: url("https://example.com/image.png")
<css_property>: url('https://example.com/image.png')
<css_property>: url(https://example.com/image.png)
パス
SVG 図形の ID への参照 -- circle, ellipse, line, path, polygon, polyline, rect -- パスとして図形の形状を使用します。
<url-modifier>
将来的に url() 関数は、 URL 文字列の意味を変更する修飾子、識別子、関数記法を指定することに対応するかもしれません。これはまだ対応されておらず、仕様書では完全には定義されていません。

形式文法

url( <string> <url-modifier>* )

content プロパティ

HTML

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

CSS

li::after {
  content: ' - ' url(https://mdn.mozillademos.org/files/16761/star.gif);
}

結果

data-uri

HTML

<div class="background"></div>

CSS

.background {
  background: yellow;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='45'%3E%3Cpath d='M10 10h60' stroke='%2300F' stroke-width='5'/%3E%3Cpath d='M10 20h60' stroke='%230F0' stroke-width='5'/%3E%3Cpath d='M10 30h60' stroke='red' stroke-width='5'/%3E%3C/svg%3E");
}

仕様書

仕様書 状態 備考
CSS Values and Units Module Level 4
url() の定義
編集者草案
CSS Values and Units Module Level 3
url() の定義
勧告候補 CSS 第2水準 (第1稿) から重要な変更なし
CSS Level 2 (Revision 1)
uri() の定義
勧告 CSS 第1水準から重要な変更なし
CSS Level 1
url() の定義
勧告 初回定義

ブラウザーの互換性

BCD tables only load in the browser

関連情報