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

Posted 2023-03-05

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

【英文标题】：can <figure> tag in html5 be used for background images?

【发布时间】：2011-12-16 08:02:19

【问题描述】：

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

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

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

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

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

非常感谢

【参考方案1】：

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

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

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

【参考方案2】：

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

img 
    object-fit: cover;

See this *** question.

【参考方案3】：

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

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

【讨论】：

如果只是为了装饰，那就不是<figure>。

我使用

昆汀，我并不反对，但我客观地阅读了他对图形的使用，因为他描述了 css sprites 的使用。 :)