在本教程中，我们将逐步完成添加和样式化演示站点中显示的顶级配置文件图像的步骤。
在我们开始之前，您可能需要选择一张个人资料照片以包含在您的网站上。如果您没有个人资料照片，您可以使用任何图像进行演示或通过Getavataaars.com 等网站创建头像。否则，您可以通过在此处下载图像来使用我们演示站点中的图像。（有关如何使用 HTML 向网页添加图像的复习，请访问本教程系列前面的教程HTML 图像。）
一旦你选择一个图像，将其保存为small-profile.jpg您的image文件夹中。
将以下<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>考虑到top-padding我们<div>在上一教程中为容器指定的属性，它也应该位于容器顶部下方 80 像素处。接下来，让我们为我们的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% 可使图像呈圆形。将边框值设置10px solid #FEDE00为 10 像素宽并具有十六进制颜色值的实心边框#FEDE00.
您现在应该知道如何使用 HTML 向您的网站添加个人资料图片并为其设置样式。我们现在准备在下一个教程中为网页添加标题和副标题。
