CSS url() 语法
在 CSS 中，url() 函数用于指定外部资源（如图片、字体、视频等）的地址。需要特别注意的是，url() 函数有 3 种语法格式。
语法：
url("路径")
url('路径')
url(路径)说明：
路径可以是相对路径，也可以是绝对路径（比如网络路径）。路径可以带引号（单引号或双引号），也可以不带引号。如果资源路径错误或加载失败，浏览器不会报错，而是自动跳过该属性值。
url() 函数支持多种资源类型，包括：
- 图片：.png、.jpg、.svg 等。
- 字体：.woff、.ttf、.otf 等。
- 视频：.mp4、.webm 等。
- 音频：.mp3、.ogg 等。
url() 函数常用于 background-image、content、@font-face 等属性中。
提示: 在实际开发中，建议优先使用相对路径而不是绝对路径，因为相对路径在网站迁移时更加的灵活。
CSS url() 摘要
| 属于 | CSS 函数 |
|---|---|
| 使用频率 | 高 |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
CSS url() 示例
接下来，我们通过几个简单的例子来讲解一下 CSS url() 函数是如何使用的。
示例 1：url() 用于设置背景图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 200px;
height: 200px;
background-image: url("imgs/bird.jpg");
background-size: cover;
}
</style>
</head>
<body>
<div></div>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，我们使用 url() 函数来设置了一个外部图片作为背景图片。此外，这里还使用了 background-size 属性来确保图片可以覆盖整个元素。
示例 2：url() 用于自定义字体
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
@font-face {
font-family: "VeraSeBd";
src: url("https://mdn.github.io/css-examples/web-fonts/VeraSeBd.ttf");
}
div {
font-family: "VeraSeBd", sans-serif;
font-size: 30px;
}
</style>
</head>
<body>
<div>lvyenet</div>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，我们使用 @font-face 规则来实现自定义字体类型。其中，url() 函数用于加载一个外部字体文件（VeraSeBd.ttf）。然后在 div 元素中使用了该字体，从而实现了自定义字体效果。
如果字体加载失败，则浏览器会使用设置的回退值（即 sans-serif）。
示例 3：url() 在 content 属性中加载图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div::before {
content: url("imgs/python.svg");
margin-right: 10px;
}
</style>
</head>
<body>
<div>Python 是当下最流行的编程语言之一。</div>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，我们使用伪元素（::before）的方式在文本前插入一个 Python 图标。url() 函数会将图片作为内容直接插入。这种方式适合用于额外添加装饰性的图标。
