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

图形和figcaption元素在语义上非常具体。如果你不关心语义，那么使用它们真的没什么理由。 Divs工作正常。以下是应该的使用方式：

<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

您的用例是创建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.

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

3 个答案: