描绘图像的最佳做法和既定方法是什么？我的假设是它不应该再用HTML完成，所以我没有在我的标记中使用img标记。相反，我通过background: url('dir')链接我的CSS中的图像。如果我对这个假设已经出错了，请告诉我。
如果在CSS中链接图像是正确的（或至少是一种良好的，完善的）方式，那么下一个问题是在文档中使用什么HTML标记？从技术上讲，图像可以应用于HTML中的任何元素，那么哪一个是正确的？
例证：现在我正在处理一行图标，其中每个图标下面都有一些文字。目前，我已将其设置为无序的水平列表，并且我将CSS中的图像和文本应用于每个单独的列表项标记。但是，我还有其他几种方法可以做到这一点。例如，我可以有一行divs或spans。或者我可以使用img标记而不在HTML中定义src属性，而是在CSS中设置它（至少我认为这是可能的）。或者我能想到的其他几种方式。
在这种情况下，最佳做法是什么？
答案 0 :(得分：3)
如果图像是页面上的上下文信息，则应使用<img>标记显示图像。例如，如果您有一个显示自定义游泳池的网页，则应使用<img>标记在页面上设置您的游泳池图像（在正常情况下），并使用适当的alt属性
// Shows a picture of a pool, provides contextual fallback text
<img src="pool.png" alt="The 'Custome' style pool." />
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-icon{background:url('alert.png');width:42px;height:42px}
同样重要的是要注意，默认情况下会打印<img>，而background-image则不会。 Chrome以及其他浏览器现在可以选择打开后台打印，但如果您想100％确定打印图像，<img>就可以了。
TL; DR：对于大多数情况，请使用<img>作为具有正确alt属性的上下文图像。将CSS背景图像用于不向网站传达上下文的装饰或精灵。
答案 1 :(得分：0)
如果要显示可以通过background或class操纵其图像的精灵，最好使用CSS显示使用id属性的图像。除此之外，使用<img>标签仍在实践中。