html - 在 div 中使用背景图像而不是经典的 <img> 来创建带链接的图像有什么优势？

<分区>

我知道使用标签的经典方式

<picture>
  <a href="#top-test">
     <img src="images/sample.gif" style="float:left" alt="Demo">
  </a>
</picture>

但我发现一个网站只使用 divs 并一直使用 background-image 来显示图像。

他们这样做有什么好处或理由吗？这是因为将动态出现的两个图像放在悬停“立即出价”和“观察列表”上会更容易

<div class="category-image">
    <a href="/catalog_items/571200">
       <div class="lot-thumb" data-original="http://s3.amazonaws.com/images.charitybuzz.com/images/135744/home_page_thumb.jpg?1401827702" style="display: block; background-image: url(http://s3.amazonaws.com/images.charitybuzz.com/images/135744/home_page_thumb.jpg?1401827702);">
              &nbsp;
       </div>
   </a>
          <a class="button important item-bidder hide-for-medium-down" href="/catalog_items/571200">Bid Now</a>
          <a class="button important item-watcher hide-for-medium-down" href="/catalog_items/571200/toggle_watch" data-item-id="571200" data-view="watcher">+ Watchlist</a>
</div>

检查:取自http://www.charitybuzz.com/ ？

谢谢

最佳答案

它允许您在元素中包含实际文本(用 CSS 偏移，因此人们看不到它)而不是 alt 属性，这在理论上更适合搜索引擎。

它还允许您使用 sprite(包含多张图片的背景图像，这些图片使用 background-position、height 和 width 裁剪)来减少为图像发出的 HTTP 请求数。

关于html - 在 div 中使用背景图像而不是经典的 <img> 来创建带链接的图像有什么优势？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24107311/