0

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

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

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

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

4

2 回答 2

4

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

// Shows a picture of a pool, provides contextual fallback text
<img src="pool.png" alt="The 'Custome' style pool." />

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

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

同样重要的是要注意，默认情况下<img>会打印，不会打印background-image。Chrome 以及其他浏览器现在可以选择打开后台打印，但如果您想 100% 确定图像打印，<img>这是可行的方法。

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

于 2013-08-05T16:41:21.973 回答
0

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

于 2013-08-05T16:37:40.420 回答