url()

Baseline Widely available *

This feature is well established and works across many devices and browser versions. Itâs been available across browsers since 2015å¹´7æ.

* Some parts of this feature may have varying levels of support.

ã¡ã¢: URI ã¨ URL ã¨ã®éã«ã¯éããããã¾ãã URI ã¯åç´ã«ãªã½ã¼ã¹ãèå¥ãã¾ãã URL ã¯ URI ã®ä¸ç¨®ã§ããªã½ã¼ã¹ã®å ´æãè¨è¿°ãã¾ãã URI ã¯ãªã½ã¼ã¹ã® URL ã¾ãã¯åå (URN) ã§ãããã¨ãããã¾ãã

CSS Level 1 ã§ã¯ã url() é¢æ°è¨æ³ã¯çã« URL ã®ã¿ãè¨è¿°ãã¦ãã¾ããã CSS Level 2 ã§ã¯ã url() ã®å®ç¾©ã¯ãããã URIã URL ã¾ãã¯ URN ã®ã©ã¡ãããè¨è¿°ããããã«æ¡å¼µããã¾ãããããããããã¨ã«ãããã¯ url() ã CSS ã® <uri> ãã¼ã¿åã®çæã®ããã«ä½¿ç¨ãããã¨ãã§ãããã¨ãæå³ãã¦ãã¾ããããã®å¤æ´ã¯ç´ããããã°ããã§ãªããè°è«ã«ãªããããã URN ãå®éã® CSS ã§ä½¿ç¨ããããã¨ã¯ã»ã¼ããå¾ãªãããä¸å¿è¦ã§ãããæ··ä¹±ãè»½æ¸ããããã«ã CSS Level 3 ã§ã¯ããçãåãã®å®ç¾©ã¾ã§æ»ãã¾ãããç¾å¨ã§ã¯ã url() ã¯çã« <url> ã®ã¿ãè¨è¿°ãã¾ãã

url() é¢æ°ã¯ background, background-image, border, border-image, border-image-source, content, cursor, filter, list-style, list-style-image, mask, mask-image, offset-path, clip-path, @font-face ãããã¯åã§ã® src, @counter-style/symbol ã®å¤ã¨ãã¦ä½¿ç¨ãããã¨ãã§ãã¾ãã

æ§æ

css

/* åç´ãªä½¿ãæ¹ */
url("/proxy/example.com/images/myImg.jpg");
url("/proxy/example.com/images/myImg.jpg");
url("/proxy/example.com/images/myImg.jpg");
url("data:image/jpeg;base64,iRxVB0â¦");
url(myImg.jpg);
url(#IDofSVGpath);

/* é¢é£ããããããã£ */
background-image: url("star.gif");
list-style-image: url('../images/bullet.jpg');
content: url("my-icon.jpg");
cursor: url(my-cursor.cur);
border-image-source: url("/proxy/developer.mozilla.org/media/diamonds.png");
src: url('fantastic-font.woff');
offset-path: url(#path);
mask-image: url("masks.svg#mask1");

/* ä»£æ¿ä»ãã®ããããã£ */
cursor: url(pointer.cur), pointer;

/* é¢é£ããä¸æ¬æå®ããããã£ */
background: url('star.gif') bottom right repeat-x blue;
border-image: url("/proxy/developer.mozilla.org/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(black, transparent));

/* ä¸æ¬æå®ã§ã¯ãªãè¤æ°ã®å¤ã®ä¸é¨ã¨ãã¦ */
content: url(star.svg) url(star.svg) url(star.svg) url(star.svg) url(star.svg);

/* ã¢ããã«ã¼ã« */
@document url("/proxy/www.example.com/") { /* â¦ */ }
@import url("/proxy/www.example.com/style.css");
@namespace url("/proxy/www.w3.org/1999/xhtml");

å¤

<string>

<url-modifier>

å½¢å¼ææ³

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>

ä¾

background ããããã£ã§ä½¿ç¨ããã URL

css

body {
  background: url("/proxy/mdn.github.io/shared-assets/images/examples/leopard.jpg")
    #0000dd no-repeat fixed;
}

ãªã¹ãã®åé è¨å·ã¨ãã¦ä½¿ç¨ãããç»åãèªã¿è¾¼ã URL

<ul>
  <li>one</li>
  <li>two</li>
  <li>there</li>
</ul>

ul {
  font-size: 3rem;
  margin: 0;
}

css

ul {
  list-style: outside
    url("/proxy/mdn.github.io/shared-assets/images/examples/firefox-logo.svg");
}

content ããããã£ã®ä½¿ç¨

HTML

html

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

CSS

css

li::after {
  content: " - "
    url("/proxy/mdn.github.io/shared-assets/images/examples/star-white_16x16.png");
}

çµæ

data URL ã®ä½¿ç¨

CSS

css

body {
  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");
}

ãã£ã«ã¿ã¼ã§ã®ä½¿ç¨

SVG ãã¡ã¤ã«ã¸ã®ãã¹ã«ãè¿½å ããããã£ã«ã¿ã¼ã® ID ãä»ãããã®ã
SVG ããã¼ã¸åã«ããå ´åã¯ããã£ã«ã¿ã¼ã® IDã

css

.blur {
  filter: url("my-file.svg#svg-blur"); /* ãã£ã«ã¿ã¼ã¨ãã¦ä½¿ç¨ãã SVG ãã¡ã¤ã«ã® URL */
}

.inline-blur {
  filter: url("#svg-blur"); /* HTML ãã¼ã¸ã«åãè¾¼ã¾ãã SVG ã® ID */
}