使用<img/>而不是<div>或<span>来做CSS精灵是否总是在语义上更正确？</span> </div>

Question

我过去常常使用<div>来执行CSS精灵，但实际上最好使用<img>来执行它，并使用display: block或display: inline-block将CSS应用于它这样它在语义上更正确吗？ （因为它实际上是一个图像）。

Answer 1

没有

• 如果图片是内容的一部分，请在HTML中指定 img，object，...
• 如果图片是设计的一部分，请在CSS中指定 content，background-image，...

可以specify design (decorative) images in the HTML（使用空的alt属性），但不建议这样做：

  

纯粹的装饰性图像是视觉增强，装饰或装饰，不会为可以观看图像的用户提供超出美学的功能或信息。

     

[...]

     

虽然将内饰装饰图像包含在内并不是不可接受的，但如果它们纯粹是装饰性的，建议使用CSS包含图像。

但是，我会说在HTML中指定sprite（包含不同的图像）很少是优雅的。 替代内容是什么？示例：包含人物肖像和网站徽标的精灵。大多数用户可能会指定当前显示的图像 part 的替代内容（由CSS控制），但对于具有图像但没有CSS支持的用户来说，这显然会失败。那些人会看到整个图像文件，在这种情况下没有意义。