html5中的<figure>标签可以用于背景图片吗？

Question

我开始阅读 html5，并且正在尝试开发一个项目，以便了解事情是如何工作的。我知道标签可以这样使用：

<figure id="car">
   <img src="img/car.jpg" alt="the car">
   <p>The car</p>
</figure>

虽然我需要 6 个这样的数字，但我想使用精灵，并且（除非我不知道重要的事情）精灵只有在我添加图像宽度 css（背景图像）时才有效。所以我会做的是：

<figure id="car">
   <pre></pre> <!-- add image from css -->
   <p>The car</p>
</figure>

我可以这样使用图形标签吗？

非常感谢

Answer 1

figure 和 figcaption 元素的语义用途相当具体。如果您不关心语义，那么真的没有太多理由使用它们。 div 可以正常工作。以下是图应该的使用方式：

<figure>
  <img src="/image.jpg" alt="A description of what this image is">
  <figcaption>A description that may or may not describe the image specifically and accompanies content from within the article.</figcaption>
</figure>

编辑：我应该提到，带有背景的 pre 可能不是它的预期用途，并且根本不会帮助使用屏幕阅读器的人。搜索引擎机器人的响应也可能不同，这可能对您不利。

Answer 2

您的用例是创建object-fit 的原因。

img {
    object-fit: cover;
}

See this stackoverflow question.

Answer 3

取决于你的目的。如果只是为了装饰，当然！否则“不适用于任何传达信息或提供功能的图像，或任何主要旨在创造特定感官体验的图像。” WCAG 2.0 Techniques for CSS

许多开发人员忽略了这一点，因为解决方案通常比不担心可访问性问题更复杂。 Steve Faulkner's article on high contrast proof CSS sprites goes into this in further detail.