何时使用IMG而不是CSS背景图像？

Question

何时使用IMG而不是CSS背景图像？

htmlcssimagebackground-image

777

在什么情况下，使用 HTML 的 IMG 标签来显示图像比使用 CSS 的 background-image 更为适合？相反地又是什么情况？

因素可能包括可访问性、浏览器支持、动态内容或任何类型的技术限制或可用性原则。

- system PAUSE

9

更新一下，由于这篇文章在谷歌上排名较高，现在浏览器缩放和背景图片的图像拉伸已经成为可能，并且得到了广泛的支持（当然，IE8及以下版本除外），这使得在可以提供回退或忽略IE8及以下版本的情况下，第4点和第7点变得无关紧要。http://caniuse.com/#search=background-image - Shauna

很棒且有用的文章，我想提一个比较的问题，CSS的优势也包括悬停效果吗？使用img标签能否复制这种效果？ - ericosg

我通常会为所有内容图片添加alt属性和title属性。这样做不是更好吗？ - HartleySan

2

图片（img）也可以有包含可点击区域和提示的地图。 - Vitim.us

你在提到使用背景图像的CSS Sprite比IMG标签更好时是错误的。不，对于IMG标签来说，可以使用CSS Clip属性实现相同的效果，因此请从背景图像的优点中删除这些要点。 - Sagi_Avinash_Varma

显示剩余2条评论

31个回答

312

对我而言，这是一个黑白分明的决定。如果图像是内容的一部分，例如标志、图表或人物（真实的人物，而不是库存照片中的人物），那么请使用 <img /> 标签加上 alt 属性。对于其他所有情况，请使用 CSS 背景图像。

另一种使用 CSS 背景图像的情况是在替换文本时，例如段落/标题。

- sanchothefat

2

这是一个很好的观点，但无论何时使用图像替换文本（例如标题），都需要添加“alt”属性以使屏幕阅读器能够读取它。或者在图像未显示时仍然可以获得标题？是的，一个带样式的标题会更好，但你肯定想要这段文本吧？ - Theo Scholiadis

4

使用图像替换并不意味着直接使用图片代替文本，而是利用CSS隐藏文本并使用CSS提供的图像作为背景。这样文档的语义内容保持不变。 - roborourke

67

个人而言，当我无法复制“文本”因为它实际上是一张图片时，我感到很烦。别叫我懒惰，嗨…… - Shaz

总的来说，我喜欢通过将HTML视为“数据”和CSS视为“视图”来处理这些决策 - 因此，如果它对该特定页面具有信息性和相关性，则使用IMG；如果它纯粹是主题/布局相关的，则使用CSS。 - Mark K Cowan

1

当您需要用于SEO目的的图像时，请使用带有alt属性的img标签。否则，请使用CSS中的背景图像。 - Billu

显示剩余8条评论

120

我很惊讶还没有人提到这个： CSS 过渡效果。

你可以通过 CSS 过渡效果实现一个 div 背景图片的动态过渡：

#some_div {
    background-image:url(image_1.jpg);
    -webkit-transition:background-image 0.5s;
    /* Other vendor-prefixed transition properties */
    transition:background-image 0.5s;
}

#some_div:hover {
    background-image:url(image_2.jpg);
}

这将保存任何类型的JavaScript或jQuery动画来淡化<img/>的src。

有关过渡效果的更多信息，请访问MDN。

- Robbie JW

3

这不是一个好的理由。你可以使用一个带有两个重叠图片的div，然后使用以下CSS代码： ＃some_div {过渡：不透明度0.5秒;} ＃some_div:hover ＃top_img{不透明度：0;} - warkentien2

11

如果你阅读了那篇链接的 MDN 文章（或者 W3C 规范），你会发现 background-image 并不是可动画化的属性之一，任何这样做的浏览器（Chrome）都没有遵循 Web 标准。话虽如此，我认为它应该被包含在标准中，因为它是一种美观简单的效果，所以我对它不是标准的一部分感到失望。 - Robert McKee

@RobertMcKee 好吧，既然现在只有Chrome了lol - Christian Matthew

92

以上回答只考虑设计方面。我将在SEO方面列出它。

何时使用标签： 1. 当您的图片需要被搜索引擎索引时。 2. 如果它与内容有关，包括卡片（可点击区域），但与设计无关。设计可能是最难解析的事情，因为所有设计都是设计。也许可以区分功能性设计（卡片、缩略图、个人资料图片、可点击的东西）和审美设计，后者主要用于网站吸引力。 3. 列表项 4. 如果您的图片不太小（不是像素化的图像）。 5. 图像可以添加 alt 和 title 属性。 6. 从网页中提取的图片，想要使用打印媒体 CSS 进行打印。

何时使用 CSS 的 background-image： 1. 纯粹用于设计的图片。 2. 与内容无关的图片。 3. 可以用 CSS3 处理的小图片。 4. 重复的图像（在 blog 作者图标中，日期图标将在每篇文章中重复等）。

这些是基于这些原因使用它们的好做法。这些是图像搜索引擎优化的良好实践。

- subhash

57

浏览器默认情况下并不总是打印背景图片；如果你希望网页能够被打印出来 :)

- JayTee

10

听起来像：如果想要默认打印图像，请使用IMG。相反，如果不想要默认打印图像，请使用background-image。很好！ - system PAUSE

7

我认为这个想法是创建独立的仅供打印使用的CSS样式，可以隐藏图像或将它们更改为更合适的内容。 - Blazemonger

53

如果您将CSS放在外部文件中，那么通常最方便的方法是将经常在整个站点中使用的图像（例如标题图像）显示为背景图像，因为这样您就可以灵活地稍后更改图像。

例如，假设您有以下HTML：

<div id="headerImage"></div>

...和CSS：

#headerImage {
    width: 200px;
    height: 100px;
    background: url(Images/headerImage.png) no-repeat;
}

几天后，您需要更改图像的位置。您只需要更新CSS即可：

#headerImage {
    width: 200px;
    height: 100px;
    background: url(../resources/images/headerImage.png) no-repeat;
}

否则，您需要在每个HTML文件中更新适当的<img>标签的src属性（假设您没有使用服务器端脚本语言或CMS自动化该过程）。

此外，如果您不希望用户能够保存图像，则背景图像非常有用（尽管我从未需要过这样做）。

- Steve Harrison

15

可以通过查看源代码来保存背景图片，但这并不像右键单击图片那样容易。 - Michael Hackner

2

Firefox。右键单击。"查看背景图像"。不是很难。 - TRiG

1

除非有透明的覆盖层或页面特定的上下文菜单修改来防止你这样做。我以前见过这种情况，而且在我看来，这是相当愚蠢的，因为如果页面已经完全加载，则至少在Firefox中，您可以单击工具>页面信息/alt+t，i/右键单击并选择查看页面信息，浏览到媒体部分，并保存您想要的所有项目。当然，还有一些方法可以防止甚至那样做，比如将图像嵌入Flash文件或其他奇怪的技巧，但即使这些也可以被绕过或解决。 - JAB

我认为背景技术不太好，无法阻止用户保存图像... - ncubica

50

与sanchothefat的答案大致相同，但从不同角度出发。我总是问自己：如果我完全从网站中移除样式表，那么剩余的元素只属于内容吗？如果是这样，那么我的工作就做得很好。

- viam0Zah

46

有些答案在这里过于复杂化了情况。这是一个非常简单的情况。

每次您想放置图像时，只需回答以下问题：

这是内容的一部分还是设计的一部分？

如果您无法回答这个问题，那么您可能不知道自己在做什么或想要做什么！

此外，请不要考虑除了这两种技术之外的任何事情，只是因为您希望“打印友好”或者不是。同样，请不要使用CSS隐藏内容，以便从SEO的角度来看。如果您发现自己在CSS文件中管理您的内容，则会让自己处于劣势。这只是关于什么是内容或不是内容的一个琐碎的决定。其他方面应该被忽略。

- Dyin

我喜欢这个答案。它非常清晰。剩下的问题，如打印友好或SEO，应在每种情况下单独考虑。 - Juan Herrera

28

我还想再补充两个观点：

img 标签可以用于 调整图片大小，例如如果原始图片为100像素乘以100像素，你想要它变成80像素乘以80像素，你可以设置 img 标签的 CSS 宽度和高度。通过背景图像我不知道有什么好方法来实现这个目标。~~注意：现在也可以使用 background-image 和 CSS3 属性 background-size 来实现这个功能。~~
使用 background-image 可以方便地进行 动态精灵图切换。例如如果你有一个按钮图片，并且希望在鼠标悬停在元素上时显示一个单独的图片，则可以使用包含正常和悬停状态精灵图的背景图像，并动态更改背景位置。

- Anders Rabo Thorbeck

2

这是一个非常好的答案，特别是调整大小的点。有人会争论说可以使用background-size，但如果你想支持旧浏览器，这不一定是最好的方法。 - dudewad

1

这是CSS中的写法：background-size: 80px 80px; - Kareem

3

谢谢@Kareem。我看到这是在CSS3中引入的，而当我最初回答时，它还不存在。我已经编辑了我的答案以反映这一点。 - Anders Rabo Thorbeck

我认为需要注意的是，调整照片大小可能会涉及到像素化或插值等问题。如果可能的话，我建议不要将其调整超过40％（即使20％是标准），否则您需要将图像导入到图像处理软件中进行适当的调整以避免失去质量。如果没有足够的信息来拉伸和填充分配的像素数量，则DPI质量在这里可能很重要。 - dale landry

23

使用 <IMG> 标签的另一个好处与 SEO 相关 - 也就是说，您可以在图像标签的 ALT 属性中提供有关该图像的其他信息，而在通过 CSS 指定图像时无法提供这样的信息，在这种情况下，只有图像文件名称可能被搜索引擎索引。ALT 属性肯定使 <IMG> 标签比 CSS 方法具有 SEO 优势。这就是为什么我认为最好使用 <IMG> 标签指定您想要在图像搜索结果（例如 Google 图像搜索）中排名良好的图像。

- Pavel Vladov

背景图片的ALT值可以在网站地图中定义。 https://www.google.com/schemas/sitemap-image/1.1/ - Kareem

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- system PAUSE · Accepted Answer

IMG的正确使用方法

如果您希望人们打印您的页面并且希望默认包含图像，请使用IMG。 —JayTee
当图像具有重要的语义含义时，例如警告图标，请使用IMG（带有alt文本）。这样可以确保在所有用户代理中，包括屏幕阅读器，都能传达图像的含义。

IMG的实用使用方法

如果图片是内容的一部分，例如标志、图表或真实人物（而不是股票照片中的人物），请使用IMG加上alt属性。—sanchothefat
如果您依赖浏览器缩放以使图像与文本大小成比例，请使用IMG。
为多个叠加图像在IE6中使用IMG。
~~使用带有z-index的IMG可以拉伸背景图像以填充整个窗口。~~
注意，这在使用CSS3 background-size后不再适用；请参见下面的#6。
在动画背景上，使用img而不是background-image可以大大提高性能。

何时使用CSS背景图像

如果图片不是内容的一部分，请使用CSS背景图片。—sanchothefat
在进行文本替换（如段落/标题）时，请使用CSS背景图片。—sanchothefat
如果您希望人们打印您的页面并且不希望默认包含图像，请使用background-image。—JayTee
如果需要改善下载时间，则可以使用background-image，如CSS sprites。
如果只需显示图像的一部分，则可以使用background-image，如CSS sprites。
使用background-size:cover和background-image来拉伸背景图片以填充整个窗口。