如何添加一个图像和背景图像在HTML

你听说过吗人们只记得他们读过的20%，但是他们看到的80%吗?虽然确切的比例存在争议，但基本的想法是:人们很容易通过视觉来学习和处理信息。

这就是为什么大多数网站使用图片的原因，也是为什么在自己的网站上包含图片很重要的原因。图像有助于使您的内容更翔实、更吸引人、更容易记住。除了改善访问者体验，它们还可以帮助提高你的有机搜索流量。

谷歌Images -不是谷歌Search，谷歌图像搜索——是一个主要的搜索引擎，是人们找到你的网站的另一种方式。因此，提供高质量的内容和图像可以帮助你的目标关键字排名，并为你的网站带来流量。2019年，HubSpot正是这样做的，导致了一场来自网络和图片搜索的有机流量同比增长25%。

现在我们明白了为什么图像很重要，让我们学习如何将它们添加到页面。如果你使用一个网站建设平台CMS中心或WordPress，然后很简单-只需点击工具栏中的图像图标，从文件管理器中选择一个图像，并插入它。

如果你不使用前端网站构建器，那么你仍然可以添加图像到你的网站。你只需要知道一些超文本标记语言。让我们来看看下面的过程。

语法是这样的:

在HTML中，图像被称为“空元素”。像段落这样的元素由一个开始标签和一个结束标签组成，其中包含内容，而图像没有结束标签。相反，它在开始标记中使用属性指定内容。

比较下面的代码行，看看段落和图像之间的区别:

这是一个段落。

注意上图中的两个属性。图像元素必须始终具有src(源)属性，包含图像URL或文件路径。否则，浏览器将不知道要呈现什么。而浏览器可以在没有alt属性，它被认为是包含的最佳实践。这是因为这个属性包含图像alt文本。

图像替换文本很重要，有几个原因。首先，如果图像无法在用户屏幕上加载，它将代替图像出现。第二,它帮助屏幕阅读工具向读者描述图像有视力障碍的人如果不使用它可能无法理解图像。第三，它允许搜索引擎更好地抓取和排名你的网站。

你可能还会看到a风格属性，包含图像的宽度和高度。指定宽度和高度可以帮助防止网页闪烁时，图像加载。下面是带有这些附加属性的代码:

需要注意的是，您还可以在内联CSS之上，使用内部或外部CSS来指定图像的大小。要了解这三种CSS的区别，请查看我们的指南如何添加CSS到HTML。

如何插入一个背景图像在HTML

如果您想将图像设置为网页或HTML元素的背景，而不是简单地将图像插入到页面上，那么您将需要使用CSS背景图像属性。此CSS属性替换了背景图像属性。它比HTML属性更加灵活和可预测——而且仍然易于使用。

设置的值背景图像，你必须使用以下语法:url (' ');

您将在单引号之间放置图像URL或文件路径。

如何在页面上插入背景图像

首先，假设您想要设置一个图像作为整个页面的背景。在这种情况下，您将对身体元素。使用一个CSS选择器，可以定义背景图像财产的头部分或外部样式表中。对于这个演示，我们将使用与上面相同的图像更改文本颜色变成白色，这样我们就能看到了。

CSS:

身体{
背景图片:url (https://scx1.b-cdn.net/csz/news/800/2017raybetapp/theoreticala.jpg);
颜色:# FFFFFF;
}

HTML:

背景图片< h2 > < / h2 >
背景图像在body元素中指定

结果:

看起来太棒了!但是如果图像比浏览器小怎么办?在这种情况下，默认情况下它将平铺自己，如下所示。

为防止这种情况发生，可以使用平铺方式属性，并将其设置为没有重演。

CSS:

身体{
背景图片:url (https://scx1.b-cdn.net/csz/news/800/2017raybetapp/theoreticala.jpg);
平铺方式:不再重演;
颜色:# FFFFFF;
}

HTML保持不变。下面是它现在在前端的样子:

您已经解决了重复的问题，但是现在在图像的下方和右侧有很多额外的空白。确保背景图像覆盖整个身体元素—或者，换句话说，占据了整个浏览器窗口—您可以使用background-size属性，并将其设置为封面。然后，为了防止图像扭曲其尺寸，使用background-attachment属性，并将其设置为固定。这样，图像将保持其原始比例。

CSS:

身体{
背景图片:url (https://scx1.b-cdn.net/csz/news/800/2017raybetapp/theoreticala.jpg);
平铺方式:不再重演;
background-attachment:固定;
background-size:封面;
颜色:# FFFFFF;
}

HTML保持不变。下面是它现在在前端的样子:

如何插入一个背景图像的HTML元素

你也可以设置一个图像作为一个HTML元素的背景，而不是整个网页。

例如，您可以将HTML元素放置在div，然后使用上面使用的CSS属性将div作为目标。区别之一是，不设置background-size财产封面，我们将它设置为100% - 100%。这意味着图像将根据需要水平和垂直拉伸以适应整个div元素，而不会保留其原始尺寸。

CSS:

div {
背景图片:url (https://scx1.b-cdn.net/csz/news/800/2017raybetapp/theoreticala.jpg);
平铺方式:不再重演;
background-attachment:固定;
background-size: 100% - 100%;
颜色:# FFFFFF;
}

HTML:

< div >
背景图片< h2 > < / h2 >
在这个例子中，背景图像被指定为div元素
但是你可以为任何HTML元素指定背景图像
 

< / div >

这个段落没有包含在div中，因此没有图像背景

结果:

让你的网站可视化

在网站上添加图片对访问者体验和搜索引擎都很重要。无论你是用内容管理系统还是从头开始构建网站，这都很容易。您只需要了解一些HTML和CSS。

编者按:本文最初发表于2020年9月，现已全面更新。