如何在 HTML 和 CSS 中链接 Unsplash 图片

将 Unsplash 图像链接到 HTML 标签。

将 Unsplash 图像链接到 CSS 规则

总结

如果你正在阅读这篇博客，我假设你已经知道 Unsplash 是什么。如果你不知道的话，Unsplash 是一个免费提供图片素材的网站。Unsplash 允许你直接将图片下载到电脑上，或者将图片链接到你的博客。

在这篇博文中，您将学习如何将 Unsplash 中的图像链接到您的 HTML 或 CSS 样式表。

将 Unsplash 图像链接到 HTML 标签。

创建 HTML 标签后，将图像粘贴url到srcHTML 代码中的属性中。

Unspash 要求source在unsplash.com

示例 1

<main class="image__wrapper">
  <img src="https://source.unsplash.com/" alt="" width="300" >
</main>

然后转到 Unsplash 并选择您想要的任何图像。

• 单击您想要链接到项目的图像

• 从浏览器的地址栏复制图像ID，并将其粘贴到正斜杠后面，如下所示。

示例 2

<main class="image__wrapper">
  <img src="https://source.unsplash.com/3tYZjGSBwbk" alt="" width="300" >
</main>

浏览器预览

将 Unsplash 图像链接到 CSS 规则

流程相同。创建 CSS 规则后，将图像添加到background或background-image属性，如下所示。

示例 3

 <main class="image__wrapper">
        <img src="" alt="" width="" >
  </main>

main {
    background:url('https://source.unsplash.com/3tYZjGSBwbk');
    width: 300px;
    height: 400px;
    background-position: center;
    background-repeat: no-repeat;
    background-origin: content-box;
    background-size: cover;
}

当您选择使用 CSS 链接图像时，请不要使用img标签或任何其他空标签，因为这将不起作用。这是因为img标签或空标签是自包含元素并且没有背景。

不要使用 Img 标签在 CSS 上选择图像

使用非空标签

总结

我们学习了如何在 Html 和 CSS 中链接 Unsplash 图像并进行了讨论。

• 将 Unsplash 图像链接到 HTML 标签。

• 将 Unsplash 图像链接到 CSS 规则

好了！本教程到此结束。感谢您抽出时间阅读本文。欢迎提问，我很乐意为您解答。您可以在 Twitter 和其他社交媒体上关注我：@ocxigin，或者发送电子邮件至ocxigin@gmail.com。

干杯