CSS | url()函数

在 CSS 中，我们经常会用到 url() 函数来定义各种资源的路径，比如图片、字体文件、音频、视频等。url() 函数非常灵活，可以接受相对路径、绝对路径和网络路径，而且还支持 data URI。下面让我们来详细介绍 url() 函数的用法和常见问题。

语法

url() 函数的语法非常简单，只有一个参数，即资源的路径。路径可以是相对路径或绝对路径，如果是相对路径，会相对于当前 CSS 文件的路径来解析。

background-image: url('image.png');

另外，如果路径中包含特殊字符，比如空格、中文字符、引号等，需要使用引号或单引号将路径括起来。

background-image: url("images/my photo.png");

引用绝对路径

当我们需要引用一个位于根目录的资源时，可以使用绝对路径，即以 / 开头的路径。

background-image: url('/images/banner.png');

引用网络路径

如果资源位于其他网站上，我们可以使用完整的 URL 来引用。

background-image: url('https://example.com/images/logo.png');

data URI

除了常规的路径引用，url() 函数还支持 data URI，它允许我们将图片或其他资源的内容嵌入到 CSS 文件中，从而避免了多次发送 HTTP 请求的问题。data URI 的语法如下：

data:[<mediatype>][;base64],<data>

其中 mediatype 是 MIME 类型，base64 是可选的，表示数据被编码为 base64 字符串，data 是资源的实际内容。下面是一个例子：

background-image: url('data:image/png;base64,iVBORw0KG...');

请注意，虽然 data URI 可以很方便地嵌入资源，但也存在一些缺点，比如：

• 转换成 base64 后会增加文件大小，导致加载时间变慢。
• IE8 及以下版本不支持 data URI。

因此，我们应该根据实际情况来选择使用 data URI 还是常规的路径引用。

常见问题

如何避免缓存问题

当我们修改了资源文件但又发现浏览器没有更新文件，这就是缓存问题。解决这个问题的方法是给引用路径加上版本号或时间戳，使得浏览器可以强制重新加载。

比如，我们可以将引用路径改成这样：

background-image: url('images/banner.png?v=1.0');

或者这样：

background-image: url('images/banner.png?t=1624288800000');

这样做的原理是，只要 URL 发生变化，浏览器就会重新加载资源。

如何在不同分辨率设备中显示不同大小的图片

我们可能会遇到这样的需求，即在不同分辨率的设备上，展现不同大小的图片。这时可以使用 响应式图片 技术。

首先，我们要为不同尺寸的设备准备不同大小的图片。比如，我们为 Retina 屏幕准备了一张宽度为 400px 的图片和一张宽度为 800px 的图片。然后，在 CSS 中，我们可以使用 @media 查询来针对不同的设备尺寸设置背景图片。

@media screen and (-webkit-min-device-pixel-ratio: 2), 
       screen and (min-resolution: 192dpi) {
  /* Retina 屏幕 */
  .myclass {
    background-image: url('images/banner@2x.png');
  }
}

@media screen and (max-width: 768px) {
  /* 小屏幕设备 */
  .myclass {
    background-image: url('images/banner-small.png');
  }
}

/* 默认情况下使用普通屏幕的图片 */
.myclass {
  background-image: url('images/banner.png');
}

这样，我们就可以实现根据设备尺寸显示不同大小的图片了。

结语

url() 函数是 CSS 中非常常用的函数，可以帮助我们引用各种资源。了解 url() 函数的用法和常见问题，可以让我们更好地处理 CSS 文件中的资源引用。