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

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> 

编辑：我应该指出，与背景的前很可能这并不打算如何使用，将不利于人与屏幕阅读器在所有。搜索引擎的机器人可能会有不同的响应，这可能会对您造成负面影响。

Answer 2

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

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

Answer 3

您的使用案例是为什么object-fit被创建。

img { 
    object-fit: cover; 
} 

See this stackoverflow question.