HTML5中的<figure>标签是否可以用于背景图片？

Question

我开始学习HTML5，正在尝试制作一个项目以便了解事情是如何工作的。我知道标签可以像这样使用：

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

虽然我需要六个这样的图形，因此我希望使用精灵图，（除非我不知道重要的东西）只有在添加图像宽度css（背景图像）时，才能使用精灵图。所以我会做这样的事情：

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

我可以像这样使用figure标签吗？

非常感谢。

- aurel

Answer 1

图像和标题元素在语义上具有明确的目的。如果您不关心语义，那么使用它们的原因其实并不大。Div元素也可以正常工作。以下是figure应该使用的方式：

<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可能不是这样使用的意图，并且对于使用屏幕阅读器的人没有任何帮助。搜索引擎的机器人也可能会有不同的反应，这可能对您不利。

- Steve Adams

Answer 2

您的使用场景就是为什么创建了object-fit。

img {
    object-fit: cover;
}

See this stackoverflow question.

- nikk wong

Answer 3

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

许多开发人员忽略了这一点，因为解决方案往往比简单地不担心无障碍问题更加复杂。Steve Faulkner's article on high contrast proof CSS sprites goes into this in further detail.

- Norman B. Robins0n

---

如果仅仅是为了装饰，那么它就不是一个<figure>。 - Quentin

我正在使用<figure>标签，因为我认为这样做是正确的。我只是觉得这样做可能会更好，可以通过使用sprites来节省一些请求时间。 - aurel

Quentin，我不反对，但是我客观地阅读了他使用数字的方式，因为他在描述使用CSS精灵。 :) - Norman B. Robins0n