如何使用HTML将样式化的个人资料图像添加到您的网页

在本教程中，我们将逐步完成添加和设置顶部轮廓图像的步骤，如 演示网站 中所示。

在我们开始之前，您可能需要选择一张个人资料照片以包含在您的网站上。 如果您没有个人资料照片，您可以使用任何图像进行演示或通过 Getavataaars.com 等网站创建头像。 否则，您可以通过在此处 下载图像 来使用我们演示站点中的图像。 （有关如何使用 HTML 将图像添加到网页的复习，请访问本教程系列前面的教程 如何使用 HTML 将图像添加到您的网页。）

选择图像后，将其保存为 image 文件夹中的 small-profile.jpg。

将以下突出显示的 <img> 元素粘贴到您在 上一个教程 中创建的开始和结束 <div> 标记之间，如下所示：

...
<div style="background-image: url('ImageLocation');background-size: cover; height:480px; padding-top:80px;">
  <img src="ImageFilePath" style="height:150px">
</div>
...

确保将突出显示的 src 地址与您的个人资料图像的文件路径切换出去。 请注意，我们还使用 style 属性将图像的高度指定为 150 像素。 <img> 元素不需要结束标记。

保存并在浏览器中重新加载页面以检查您的结果。 您应该收到以下信息：

鉴于我们使用 style 属性指定的高度，您的个人资料图像应显示为 150 像素高。 它也应该位于 <div> 容器顶部下方 80 像素处，鉴于我们在 上一教程 中为 <div> 容器指定的 top-padding 属性. 接下来，让我们为我们的 style 属性添加属性，这将使我们的图像具有圆形和黄色边框。 我们还将添加 替代文本 以提高使用屏幕阅读器的网站访问者的可访问性。

将突出显示的属性添加到您的 <img> 元素：

<img src="ImageFilePath" style="height:150px; border-radius: 50%; border: 10px solid #FEDE00;" alt="This is a small profile image of Digital Ocean’s mascot, a blue smiling shark.">

确保您仍然将正确的图像文件路径列为 src 地址。 保存文件并在浏览器中重新加载。 您应该会收到如下信息：

在继续之前，让我们暂时停下来研究一下我们刚刚所做的代码修改。 将 border-radius 值设置为 50% g 会使图像呈现圆形。 将边框值设置为 10px solid #FEDE00 可为图像提供一个 10 像素宽且具有十六进制颜色值 #FEDE00. 的实心边框

您现在应该知道如何使用 HTML 向您的网站添加个人资料图像并为其设置样式。 我们现在准备在下一个教程中为网页添加标题和副标题。