在 html/css 中显示图像的标准兼容和/或最佳实践方式 [重复]

Posted 2023-03-05

【中文标题】在 html/css 中显示图像的标准兼容和/或最佳实践方式 [重复]

【英文标题】：Standard compliant and/or best practice way to display an image in html/css [duplicate]

【发布时间】：2013-08-06 10:56:40

【问题描述】：

描绘图像的最佳做法和既定方式是什么？我假设它不应该再在 html 中完成，所以我不在我的标记中使用 img 标记。相反，我通过background: url('dir') 在我的 CSS 中链接图像。如果我已经对这个假设有误，请告诉我。

如果在 CSS 中链接图像是正确的（或至少是良好的、完善的）方法，那么下一个问题是在文档中使用什么 HTML 标记？从技术上讲，图像几乎可以应用于 HTML 中的任何元素，那么哪个是正确的使用呢？

举个例子：现在我正在处理一排图标，每个图标下面都有一些文字。目前，我将其设置为无序的水平列表，并将 CSS 中的图像和文本应用于每个单独的列表项标签。但是，还有其他几种方法可以做到这一点。例如，我可以有一排 divs 或 spans。或者我可以使用img 标签而不在HTML 中定义src 属性，而是在CSS 中设置它（至少我认为这是可能的）。或者我能想到的其他几种方式。

在这种情况下，最佳做法是什么？

【问题讨论】：

“我假设它不应该再在 html 中完成，所以我不在我的标记中使用 img 标签。” wat

img 标签还不错，只要确保设置了替代文本。但是用 CSS 插入内容肯定是不好的，除非这是最后的努力，否则不要这样做。我发现两者的混合效果最好。

不是很多，但是如果用户禁用了样式表，并且您的网站上没有任何 img 标签，那么它将非常空。

【参考方案1】：

如果您想显示可以通过class 或id 操作其图像的精灵，则最好使用background 属性使用CSS 显示图像。除此之外，使用<img> 标签仍在实践中。

【参考方案2】：

如果图像是页面上的上下文信息，则应使用<img> 标签显示图像。例如，如果您有一个显示您构建的自定义游泳池的网页，则应在页面上使用 <img> 标记和适当的 alt 属性在页面上设置您的游泳池图像（在正常情况下）。

// Shows a picture of a pool, provides contextual fallback text
<img src="pool.png"  />

CSS 背景图像更多地用于页面上的造型师或装饰。您网页的背景图片与上下文无关，因此例如使用背景图片进行设置。然而，CSS 背景图像被用于诸如sprites 或 javascript 滑块之类的东西。在这些情况下，会采取特殊措施确保它们仍被指定为上下文内容（例如设置title 属性）。

// Alert icon is just a design element and does not
// provide context to the page
<div class="alert-icon"></div>
.alert-iconbackground:url('alert.png');width:42px;height:42px

还需要注意的是，默认情况下，<img> 将被打印，background-image 不会。 Chrome 以及其他浏览器现在可以选择打开后台打印，但如果您想 100% 确定打印图像，<img> 是您的最佳选择。

TL;DR：在大多数情况下，使用<img> 获取具有适当alt 属性的上下文图像。将 CSS 背景图像用于不向网站传达上下文的装饰或精灵。

【讨论】：

+1 用于打印方面。虽然许多网页并不打算打印，但总会有需要打印的情况。地图/方向将是首先想到的。如果您有前往自定义泳池商店的路线并且图片是静态地图，那么您肯定会希望将其包含在内。