开发学习网CSS url()
原创url()
url() CSS 函数用于包含文件。参数可以是绝对 URL、相对 URL、blob URL 或数据 URL。url() 函数可以作为其他 CSS 函数的参数传递，如 attr() 函数。根据属性值的不同，所查找的资源可以是图像、字体或样式表。url() 函数标记表示 <url> 数据类型的值。
备注： URI 和 URL 是不同的。URI 用于标识资源。URL 是 URI 的一种类型，用于描述资源的位置。URI 可以是 URL，也可以是资源的名称（URN）。
在 CSS 第 1 版中，url() 函数标记只表示真正的 URL。在 CSS 第 2 版中，url() 的定义扩展到可描述任何 URI，无论是 URL 还是 URN。令人困惑的是，这意味着 url() 可以用来创建 <uri> CSS 数据类型。这种更改不仅笨拙，而且毫无必要，因为 URN 几乎从未在实际 CSS 中使用过。为了减少混淆，CSS 第 3 版又回到了狭义的初始定义。现在，url() 只表示真正的 <url>。
css
/* 简单用法 */
url("https://example.com/images/myImg.jpg");
url('https://example.com/images/myImg.jpg');
url(https://example.com/images/myImg.jpg);
url("data:image/jpg;base64,iRxVB0…");
url(myImg.jpg);
url(#IDofSVGpath);
/* 相关属性 */
background-image: url("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('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(rgb(0 0 0 / 100%), transparent));
/* 作为非简写多重数值的一部分 */
content: url(star.svg) url(star.svg) url(star.svg) url(star.svg) url(star.svg);
/* at 规则 */
@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、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
translateZ() 下一篇：CSS
var()
相关文章
作者文章
- CSS 使用CSS数学函数 4个月前 (08-23)
- CSS Textual data types 4个月前 (08-23)
- CSS 数字数据类型 4个月前 (08-23)
- CSS CSS 属性值定义语法 4个月前 (08-23)
- CSS 使用 CSS 过渡 4个月前 (08-23)