HTML <img> 标签
在以下情况下使用 <img> 标签：
- 当它不仅是一个设计元素，而且是内容的一部分时，例如图表、徽标或者人物。
- 当我们希望人们打印页面并希望默认包含图像时。
- 当我们希望被搜索引擎索引时。 Google 不会自动将背景图片编入索引。浏览器不会向辅助技术提供有关背景图像的任何信息。但是使用带有 alt 和 title 属性的 <img> 标签将有助于屏幕阅读器识别。
- 当图像具有基本语义（例如，警告图标）时。 <img> 标签的使用将确保可以在所有用户代理中传达含义。
- 当我们依赖浏览器缩放以与文本大小成比例地呈现图像时。
- 当我们想提高背景动画的性能时。
使用 HTML <img> 标签的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
</head>
<body>
<h2>Example</h2>
<img src="https://onitroad.com/nature.png" alt="Nature" width="500" height="333">
</body>
</html>
CSS background-image 属性
在以下情况下使用 CSS background-image 属性：
- 如果图像仅用于设计。
- 如果图像不是内容的一部分。
- 如果我们希望人们可以打印页面，并且不希望默认包含图像。
- 如果我们想缩短下载时间（与 CSS 精灵一样）。
- 如果我们只需要使图像的一部分可见。
- 如果要对文本进行图像替换。
- 如果我们需要拉伸背景图像以填充其整个窗口。与背景大小设置为“cover”一起使用。
- 如果需要重复图像。
让我们看一个带有 background-image 属性的例子，它与带有“cover”值的 background-size 属性一起使用。
使用 CSS background-image 属性的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
.image {
background-image: url("https://onitroad.com/nature.png");
background-color: #cccccc;
height: 500px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
</style>
</head>
<body>
<div class="image"></div>
</body>
</html>
当 HTML <img> 标签和 CSS background-image 属性给出相同的视觉效果时，有很多情况。
但是它们之间有什么区别呢？
好吧，在这个片段中，我们将讨论它们之间的差异，之后我们可以在使用它们时做出更好的决定。
日期：2020-06-02 22:15:14 来源：oir作者：oir