CSS背景图和HTML的<img>标签怎么选？

在开发中，我们可以使用 HTML 中的 <img> 标签来设置图片，也可以使用 CSS 背景来设置图片。除此之外，还可以使用 SVG <image> 来设置图片。那这些方式之间有哪些区别呢？下面就来看看这些方法都是怎么使用的，它们都有哪些优缺点，以及何时该使用哪种方法！
HTML `<img>` 标签

在最简单的情况下，img 元素必须包含 src 属性：
<img src="cool.jpg" alt="">
在页面加载时，它们会在页面图像加载时发生一些布局变化。为避免这种情况，可以为其设置 height 和 width 属性：
<img src="cool.jpg" width="200" height="100" alt="">
这样设置有什么作用呢？来看看效果图：
可以看到，右侧的图像在加载完之前，已经提前保留了空间，这就是设置了 height 和 width 属性的缘故。
可以使用 CSS 来隐藏图像，但是隐藏之后，它仍将加载到页面中。
img {
  display: none;
这段代码不会阻止浏览器加载图像，即使它在视觉上是隐藏的。 原因是 <img> 被认为是可替换元素，所以无法控制它加载的内容。
在 CSS 中，可替换元素的展现效果不是由 CSS 来控制的。这些元素是一种外部对象，它们外观的渲染，是独立于 CSS 的。
简单来说，它们的内容不受当前文档的样式的影响。CSS 可以影响可替换元素的位置，但不会影响到可替换元素自身的内容。某些可替换元素，例如 <iframe> 元素，可能具有自己的样式表，但它们不会继承父文档的样式。
图像可访问性
HTML图 像可以通过将alt属性设置为有意义的描述来访问。这对屏幕阅读器用户非常有用。
如果不需要 alt 描述，也不要删除它。如果删除了，图像 src 将被读出，这对可访问性非常不利。
来看下面两个图片：
<img class="food-thumb" width="300" height="200" src="cheescake.jpg">
<img class="food-thumb" width="300" height="200" src="cheescake.jpg" alt="">
这里，src 都无效且未加载。第一个没有设置 alt 属性，而第二个设置了一个空的 alt 属性。效果如下：
没有 alt 的图像仍然保留其空间，这不利于可访问性。 而另一个折叠以适应其空 alt 属性的内容，这导致它由于具有边框而显示为一个小点。
但是，当有 alt 属性值时，它会是这样的：
这样可以更好的向用户反馈，让用户知道这个加载失败的图片内容是什么。
除此之外，我们还可以使用伪元素来替换显示的默认替代文本，方法是将伪元素放置在默认文本的顶部，将其隐藏起来。
img:after { 
  content: "\f1c5" " " attr(alt);
  font-size: 16px;
  font-family: FontAwesome;
  color: rgb(100, 100, 100);
  display: block;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
效果如下：
响应式图像
<img> 的好处是它可以扩展为具有特定视口大小的图片的多个版本。
（1）srcset 属性
<img src="small.jpg" srcset="medium.jpg 500w, large.jpg 800w" alt="">
这是一个很简单的例子。不过，srcset 并不是根据屏幕宽度显示多个图像尺寸的完美解决方案。浏览器会选择合适的图像，我们无法控制。
（2）HTML picture 元素
<picture>
  <source srcset="large.jpg" media="(min-width: 800px)" />
  <source srcset="medium.jpg" media="(min-width: 500px)" />
  <img src="small.jpg" />
</picture>
另一种方式就是使用 <picture> 元素。这种方式更容易且更可预测。
调整图像大小
CSS 中的 object-fit 和 object-position 属性可以与 <img> 标签一起使用。使用它们可以控制 <img> 的内容如何调整大小和定位，就像 CSS 背景图一样。
object-fit 的可能值为：fill、contain、cover、none、scale-down
可以这样使用：
img {
  object-fit: cover;
  object-position: 50% 50%;
介绍完 <img> 元素，下面来看看 CSS 中的背景图。
CSS 背景图
要想设置背景图，首先需要一个 HTML 元素。
<div class="element">content</div>
.element {
  background: url('cool.jpg');
CSS 背景图的好处是可以使用 CSS 轻松控制多个背景。来看下面的例子：
.element {
    background: url('cool-1.jpg'), url('cool-2.jpg');
我们可以在特定视口上隐藏和显示图像，而无需下载它。如果图片没有设置 CSS，则不会下载。
@media (min-width: 700px) {
    .element {
        background: url('cool-1.jpg');
在上面的例子中，有一个背景图，它仅在视口宽度大于 700px 时显示。
如果想要保存网页上的图像，只需右键单击然后选择保存即可。 但这不适用于 CSS 背景图。 如果不检查检查元素，就无法下载使用 CSS 添加的图像。想要下载背景图，只能在 DevTools 中打开背景图 url 中的链接来下载。
我们可以将伪元素与 CSS 背景图一起使用，例如在图像顶部显示叠加层。 对于 <img>，这是不可能的，除非为叠加层添加一个单独的元素。
SVG 最大的优势是在不影响质量的情况下进行缩放。 此外，借助 SVG，可以嵌入 JPG、PNG 或 SVG 图像：
<svg width="200" height="200">
  <image href="cheesecake.jpg" height="100%" width="100%" preserveAspectRatio="xMidYMid slice" />
</svg>
这里我们添加了一个 preserveAspectRatio 属性，这是使图像保持 SVG 的宽度和高度，而不会被拉伸或压缩。当 <image> 宽度较大时，它将填充其父级（SVG）宽度而不会被拉伸。
这和 CSS 中的 object-fit: cover 或 background-size: cover 非常相似。

图像可访问性
当谈到 SVG 的可访问性时，就不得不说说 <title> 元素。 例如，可以像下面这样添加它：
<svg width="200" height="200">
   <title>A photo of blueberry Cheescake</title>
   <image href="cheesecake.jpg" height="100%" width="100%" preserveAspectRatio="xMidYMid slice" />
</svg>
更重要的是，可以使用 <desc>元素：
<svg width="200" height="200">
   <title>A photo of blueberry Cheescake</title>
   <desc>A meaningful description about the image</desc>
   <image href="cheesecake.jpg" height="100%" width="100%" preserveAspectRatio="xMidYMid slice" />
</svg>
给 SVG 添加标题或描述之后，其访问性就提高了。
和 CSS 背景图类似，在检查元素并复制图像的 URL 之前，不能下载嵌入在 SVG 中的图像。如果想要阻止用户下载特定图像，它可能会很有用。至少，它会减少轻松下载图像的机会。
下面通过五个例子，看看不同情况应该使用哪种设置图像方式。
文章标题背景
文章标题和简介下面有一张背景图：
对于这张图片，有一些要求：
图像可以通过后端进行动态更改；
图像上有一个遮罩层，有助于使内容易于阅读；
图片有三种尺寸：小、中、大，每个都用于特定的视口。
先来考虑几个问题：
这张图片对用户来说重要吗，还是可有可无？
是否需要在所有视口尺寸上都使用它？
图片是静态的还是会动态变化？
（1）解决方案-1
我们可以使用多个 CSS 背景来实现，一个用于遮罩层，另一个是实际的背景图：
.hero {
  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('landscape.jpg');
  background-repeat: no-repeat;
  background-size: 100%, cover;
这样是可以实现的。如果想要动态更改背景图，就可以使用内联 CSS：
<section class="hero" style="background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('landscape.jpg');">
  <!-- 内容区域 -->
</section>
这样是可行的，但是代码看起来很丑陋。或许可以使用 CSS 变量来修改一下？
<section class="hero" style="--bg-url: url('landscape.jpg')">
  <!-- 内容区域 -->
</section>
现在，我们可以通过更新--bg-url变量来更换背景图，这看起来比内联 CSS 好多了。
对于这个解决方案，主要适用于以下情况：
图像不重要，可有可无。
图像不会动态修改，而是固定的。
（2）解决方案-2
下面再来看看第二个解决方案：使用 img 标签。
<section class="hero">
  <h2 class="hero__title">CSS背景图和 img 标签怎么选？</h2>
  <p class="hero__desc">文章简介......</p>
  <img src="landscape.jpg" alt="">
</section>
在 CSS 中，需要将图像绝对定位在内容的下方，并且还需要一个伪元素作为遮罩。
.hero {
  position: relative;
.hero img {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
.hero:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
这个解决方案的好处就是很容易更改图像的src属性。此外，如果图像很重要，这个方案就更合适。除此之外，使用HTML<img>可以在图像未加载的情况下添加回退功能。这种回退至少可以保持内容可读。
.hero img {
    background: #2962ff;
网站 Logo
（1）细节多的 Logo
对于网站的 Logo，当一有很多细节或形状时，将其用作内联 SVG 可能不太好。建议使用**＜img＞**，图像文件类型可以是png、jpg或svg。
<a href="#"><img src="logo.svg" alt="Nature Food"></a>
（2）带动画的 Logo
有一个简单的 Logo，有一个形状和文字组成。当鼠标悬停在Logo上时，需要改变 Logo 的颜色。这时最合适的方案就是使用内联 SVG。
<a href="#">
    <svg class="logo" width="115" height="47" xmlns="http://www.w3.org/2000/svg">
      <g transform="translate(-5 -5)" fill="none" fill-rule="evenodd">
        <rect fill="#D8D8D8" transform="rotate(45 28.5 28.5)" x="9" y="9" width="39" height="39" rx="11" />
        <text font-family="Rubik-Medium, Rubik" font-size="25" font-weight="400" fill="#6F6F6F">
          <tspan x="63.923" y="36.923">Rect</tspan>
        </text>
    </svg>
.logo rect,
.logo text {
  transition: 0.3s ease-out;
.logo:hover rect,
.logo:hover text {
  fill: #4a7def;
（3）响应式的 Logo
所谓的响应式 Logo 就是在不同视口下，显示的 Logo 不一样。例如下面的 Logo：
当视口的宽度超过 1350px 时就显示右边的 Logo，否则就显示左边的 Logo。
这里比较完美的解决方案就是<picture>元素，它可以添加两个版本的 Logo ：
<a class="logo" href="/">
  <picture>
    <source media="(min-width: 1350px)" srcset="sm-logo--full.svg">
		<img src="sm-logo.svg" alt="Smashing Magazine">
	</picture>
在 CSS 中，需要将视口的宽度更改为等于或大于1350px：
.logo {
  display: inline-block;
  width: 45px;
@media (min-width: 1350px) {
  .logo {
    width: 180px;
轻松结局~
（4）带渐变的 Logo
当有一个带渐变色的 Logo 时，可以使用 SVG 来轻松实现渐变色。
<svg class="logo" width="115" height="47" xmlns="http://www.w3.org/2000/svg">
    <linearGradient id="gradient" x1="0%" y1="100%" x2="0%" y2="0%">
      <stop offset="0%" stop-color="#4a7def"></stop>
      <stop offset="50%" stop-color="#ab4787"></stop>
    </linearGradient>
  </defs>
  <g transform="translate(-5 -5)" fill="none" fill-rule="evenodd">
    <rect fill="#AB4787" transform="rotate(45 28.5 28.5)" x="9" y="9" width="39" height="39" rx="11" />
      <text font-family="Rubik-Medium, Rubik" font-size="30" font-weight="400" fill="url(#gradient)">
        <tspan x="63.923" y="36.923">Rect</tspan>
      </text>
</svg>
这里添加了一个＜linearGradient＞，并将其作为 text 的 fill 属性，轻松实现了带渐变色的 Logo。
如果用户需要打印页面，需要避免将图像作为CSS的背景，因为背景图不会被打印，而会显示一个空白区域：
不过，我们可以通过强制浏览器显示图像来解决这个问题（不适用于 Firefox 和 IE）：
.element {
    background: url('cheesecake.png') center/cover no-repeat;
    -webkit-print-color-adjust: exact;
对于这种情况，使用 HTML <img> 标签会更安全，因为它可以完美地打印出来。