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

发布于 2024-12-12 07:21:02 字数 473 浏览 0 评论 0原文

我开始阅读 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>

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

多谢

原文

I started reading upon html5 and I am trying to work on a project so that I can see how things work. I know that the tag can be use like this:

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

Though I need to have 6 of those figures, as such I want to use sprites and (unless I dont know something important) sprites only work if i add the image width css (background-image). So what I would do is something like:

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

can I use figure tag like that?

Thanks a lot

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

半透明的墙 2024-12-19 07:21:03

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

许多开发人员忽略了这一点，因为解决方案通常更复杂而不是简单地不担心可访问性问题。 Steve Faulkner 关于高对比度证明 CSS 精灵的文章对此进行了介绍更详细。

回复收藏 0 原文

紫南 2024-12-19 07:21:02

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 可能不是它的预期用途，并且根本不会帮助使用屏幕阅读器的人。搜索引擎的机器人也可能做出不同的反应，这可能对您不利。

The figure and figcaption elements are fairly specific in their semantic purpose. If you don't care for semantics, there is really not much of a reason to use them. Divs will work fine. Here is how figure should be used:

<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>

edit: I should mention that a pre with a background is likely not how this is intended to be used and will not help people with screen readers at all. Bots for search engines may respond differently as well, which could be a negative for you.

回复收藏 0 原文