在 div 中使用背景图片而不是经典的 <img> 来创建带有链接的图片有啥好处？ [复制]

Posted 2023-03-05

【中文标题】在 div 中使用背景图片而不是经典的 <img> 来创建带有链接的图片有啥好处？ [复制]

【英文标题】：What is the advantage of using background image in a div instead of the classic <img> to create image with link? [duplicate]在 div 中使用背景图片而不是经典的 <img> 来创建带有链接的图片有什么好处？ [复制]

【发布时间】：2014-07-29 05:28:14

【问题描述】：

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

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

但我发现一个网站只使用 div 并一直使用 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/？

谢谢

【问题讨论】：

@Notulysses 很奇怪的是他们在 Charitybuzz 的设计师看起来非常好，他们使用 css 背景图像而不是你提到的问题中的事实，人们说只有在图像不属于内容，但仅限于小的设计细节。但在这里，它所使用的图像确实是非常内容。奇怪

【参考方案1】：

它可以让你在元素中有实际的文本（用 CSS 偏移，这样人们就看不到它）而不是 alt 属性，理论上这对于搜索引擎来说是更好的食物。

它还允许您使用精灵（包含多张图片的背景图片，这些图片用background-position、height 和width 裁剪）来减少对图片发出的 HTTP 请求的数量。

【讨论】：

谢谢，当您说“实际文本”时，这里我展示的示例中使用了什么文本？

我还将添加在它们所属的 css 中定义翻转的功能，而不是依赖 javascript 来交换 img src。

谢谢，是的，我认为翻转是主要问题，即使我很惊讶他们承认在他们的图像上的 o seo 方面损失了很多

@Mathieu — 在此示例中，文本为  ，这是垃圾。可能你遇到过en.wikipedia.org/wiki/Cargo_cult_programming

的实例

:) 也许....谢谢你的帮助！