使用 Unsplash URL 获取图片并应用于 CSS 中

简介

Unsplash 是一家提供免费高质量图片的网站，它的照片都有 Creative Commons Zero（CC0）许可，也就是说可以自由使用，不需要征得作者的同意。在 CSS 中使用 Unsplash URL 可以将图片应用到网页的背景、对话框或者列表等元素中，增加网页的视觉效果。

使用步骤

1. 首先，到 Unsplash 官网寻找你需要的图片。可以使用 Unsplash 提供的搜索功能，输入关键字搜索，也可以浏览各个分类查找合适的图片。

2. 找到需要使用的图片后，点击图片跳转到详情页面。在页面右侧会有一个 Download free 的按钮，点击后可以选择下载图片的大小，选择后点击 Download 即可下载图片。

3. 下载成功后，可以在本地电脑中找到下载的图片，复制图片的 URL，例如 https://unsplash.com/photos/NxxoWIYzYmk/download?force=true&w=1920。

4. 在 CSS 中，可以通过 background-image 将图片应用到一个元素中。例如，以下代码将图片作为网页顶部的背景图：

#header {
  background-image: url(https://unsplash.com/photos/NxxoWIYzYmk/download?force=true&w=1920);
  background-size: cover;
}

其中，#header 是需要应用背景图的元素，background-size: cover 控制图片的尺寸，会自适应填充整个元素。

总结

使用 Unsplash URL 获取图片并应用于 CSS 中，可以让网页变得更加美观，增加可读性。使用步骤简单，不需要付费，但需要注意使用图片的 LICENSE。无论是开发者还是设计师，都可以使用 Unsplash 的高质量照片创建出独特的风格，从而吸引更多的用户。