何时使用 IMG 与 CSS 背景图像？

Posted 2023-03-05

【中文标题】何时使用 IMG 与 CSS 背景图像？

【英文标题】：When to use IMG vs. CSS background-image?

【发布时间】：2010-10-04 07:35:34

【问题描述】：

在什么情况下使用 html IMG 标签比 CSS background-image 更合适，反之亦然？

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

【问题讨论】：

您需要图像占用空间还是要覆盖它？

作为更新，由于这在 Google 上的排名很高，现在可以对背景图像进行浏览器缩放和图像拉伸，并且得到了广泛的支持（IE8 及以下版本当然是例外），在允许回退或忽略 IE8 及更低版本的此类影响的情况下，渲染项目 4 和 7 没有实际意义。 caniuse.com/#search=background-image

伟大而有用的帖子，我会添加一个比较的问题，css的优点也是悬停效果？可以使用 img 标签复制吗？

我通常将 alt 属性和 title 属性都添加到所有内容图像中。这不是可取的吗？

img 也可以有带有可点击区域和提示的地图

【参考方案1】：

正确使用 IMG

如果您打算使用IMG people print your page 并且您希望默认包含图像。 —JayTee 当图像具有重要的语义含义时使用IMG（带有alt 文本），例如a warning icon。这确保了图像的含义可以在所有用户代理中传达，包括屏幕阅读器。

IMG 的实际使用

如果图片使用IMG加上alt属性 是part of the content，例如徽标或图表或人物（真人，而非库存照片人物）。 —sanchothefat 如果您依赖浏览器缩放来呈现与文本大小成比例的图像，请使用 IMG。 使用IMG 为multiple overlay images in IE6。 按顺序使用IMG 和z-index stretch a background image 填满整个窗口。注意，CSS3 background-size 不再适用；见下文#6。 使用img 代替background-image 可以显着提高背景动画的性能。

何时使用 CSS 背景图片

使用 CSS 背景图像，如果 图片is not part of the content。 —sanchothefat 在以下情况下使用 CSS 背景图像 做image-replacement of text 例如。段落/标题。 —sanchothefat 如果您打算使用background-image people print your page 并且您不希望默认包含该图像。 —JayTee 如果您需要缩短下载时间，请使用background-image，如 CSS sprites。 如果您只需要让图像的一部分可见，请使用background-image，就像使用 CSS 精灵一样。 将background-image 与background-size:cover 结合使用，以拉伸背景图像以填充其整个窗口。

【讨论】：

我对文本替换部分的背景图像仍然不确定。我看到人们使用背景图像，然后使用 text-indent: -9999px 作为文本。但是我知道像这样的文本缩进曾经对 SEO 不利，我想对于某些搜索引擎来说仍然必须如此。但最重要的是，如果您关闭图像但将 css 留在图像上消失，但文本仍然不在屏幕上。就我而言，图像上的 alt 文本用于如果图像不显示，那么 img 标签会更好。

背景图像的实用性使用：当您不想担心垂直居中问题（不同垂直大小的图像）时；）

是的，垂直居中问题 - 使用 Flexbox！

@BinaryFunt - <div class="my-css-page-styles" style="background-image:url(blah.png);"></div> 这样您就可以在 CSS 样式表中设置它的样式，但如果背景图像更多的是内容问题而不是样式问题，那么您仍然需要从 HTML 方面进行编辑.

这里没有语义参数来创建准确描述正在呈现的内容的可读 HTML 吗？例如，如果您在代码中看到<img>，您知道那里会有一张图片。而如果你看到<div> 并且它有一个图像的事实被埋在某个地方的另一个文件中，这似乎是低效的 grokability。只是大声思考，您是否仍然可以使用没有src 的<img> 标签并通过CSS 应用background-image - 或者这是疯狂的谈话？

【参考方案2】：

对我来说，这是一个非黑即白的决定。如果图像是内容的一部分，例如徽标或图表或人物（真人，而不是照片人物），则使用 <img /> 标签和 alt 属性。对于其他所有内容，都有 CSS 背景图像。

另一个使用 CSS 背景图像的时间是在对文本进行图像替换时，例如。段落/标题。

【讨论】：

优秀案例！ CON--在对文本进行图像替换时使用背景图像。

这是一个公平的观点，但是文本的图像替换（例如标题）肯定需要您添加一个“alt”才能让屏幕阅读器阅读它？或者如果没有显示图像，您仍然可以获得标题？是的，一个标题然后设置样式会更好，但你肯定想要文本吗？

@TheoScholiadis 使用图像替换并不意味着使用图像而不是文本，而是使用 CSS 以某种方式隐藏文本并使用 CSS 提供图像作为背景。文档在语义上保持不变。

我个人讨厌无法复制“文本”，因为它实际上是图像。叫我懒惰，但是嘿......

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

【参考方案3】：

我很惊讶还没有人提到这个：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 上的转换的更多信息。

【讨论】：

这不是一个好的理由。你可以有一个包含 2 个叠加图像的 div，以及以下 css：#some_div transition: opacity 0.5s; 、#some_div:hover #top_img opacity: 0;

如果您阅读链接的 MDN 文章（或 w3c 规范），您会发现 background-image 不是可动画的属性之一，并且任何这样做的浏览器（chrome）都不是'不遵循网络标准。话虽如此，我认为应该是这样，而且这是一个非常简单的效果，所以我很失望它不是标准的一部分。

@RobertMcKee 很好，因为现在只有 chrome，哈哈

【参考方案4】：

以上答案仅考虑设计方面。我在 SEO 方面列出它。

何时使用<img />

当您的图片需要被搜索引擎编入索引时 如果它与内容有关，包括卡片（点击区域），但与设计无关。设计可能是这里最难解析的东西，因为所有的设计都是正确的。我想说的可能是功能设计（卡片、缩略图、个人资料图片、您可以点击的东西）与主要用于网站吸引力的美学设计。 列表项 如果您的图片不是太小（不是标志性图片）。 您可以在其中添加alt 和title 属性的图像。 您要使用打印媒体 css 打印的网页图像

何时使用 CSS background-image

纯粹用于设计的图像。 与内容无关。 我们可以使用 CSS3 播放的小图像。 重复图片（在博客作者图标中，每篇文章都会重复日期图标等）。

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

【参考方案5】：

默认情况下，浏览器并不总是设置为打印背景图像；如果您打算让人们打印您的页面:)

【讨论】：

听起来像：PRO——如果您希望图像默认打印，请使用 IMG。 CON--如果您不希望默认打印图像，请使用背景图像。不错！

我认为这个想法是有单独的仅打印 CSS 样式来隐藏图像或将它们更改为更合适的内容。

【参考方案6】：

如果您的 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 来自动执行该过程）。

如果您不希望用户能够保存图像，背景图像也很有用（尽管我从来不需要这样做）。

【讨论】：

背景图像当然可以通过一些最小的视图源探索来保存，只是不像右键单击图像那么容易。

火狐。右键点击。 “查看背景图像”。没那么难。

@TRiG 除非有透明覆盖或特定于页面的上下文菜单修改来阻止您这样做。我以前见过，在我看来这很愚蠢，因为您甚至不需要在源代码中进行探索，如果页面已完全加载，那么在 Firefox 中至少您可以单击工具>页面信息/alt+t， i/右键单击并选择查看页面信息，浏览到媒体部分，然后从列表中保存所需的所有项目。当然，有一些方法可以防止这种情况发生，比如将图像嵌入到 Flash 文件中或其他奇怪的技巧，但即使是这些也可以被绕过或考虑。

我认为后台技术不太适合拒绝用户保存图像...

【参考方案7】：

与sanchothefat's answer大致相同，但从不同的方面。我总是问自己：如果我要从网站上完全删除样式表，剩下的元素是否仅属于内容？如果是这样，我的工作做得很好。

【参考方案8】：

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

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

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

如果你不能回答这个问题，你可能不知道你在做什么或你想做什么！

另外，不要考虑这两种技术，仅仅因为您希望“打印机友好”与否。也不要使用 CSS 从 SEO 的角度隐藏内容。如果您发现自己在 CSS 文件中管理您的内容，那么您就是在打自己的腿。这只是关于内容与否的一个微不足道的决定。其他所有方面都应该被忽略。

【讨论】：

我喜欢这个答案。非常清楚。其余的问题，如打印机友好或 SEO，应在每种情况下单独考虑。

【参考方案9】：

我会添加另外两个参数：

如果您需要调整大小图像，img 标记是很好的选择。例如。如果原始图像是 100px x 100 px，并且您希望它是 80px x 80px，您可以设置 img 标签的 CSS 宽度和高度。 我不知道使用 background-image 有什么好的方法。 编辑：现在也可以使用 background-image 来完成，使用 background-size CSS3 属性。

当您需要动态地在 sprite 之间切换时，使用 background-image 是很好的选择。例如。如果您有一个按钮图像，并且希望在光标悬停在元素上时显示单独的图像，则可以使用包含正常和悬停精灵的背景图像，并动态更改背景位置。

【讨论】：

这是一个非常好的答案，尤其是调整大小点。人们会争辩说您可以使用 background-size，但如果您尝试支持旧浏览器，这不一定是最好的方法。

这是在 CSS background-size: 80px 80px;

中完成的

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

我认为重要的是要注意调整照片大小在像素化或插值方面可能会很棘手。如果可能的话，我不会调整超过 40%（这是一个拉伸 - 20% 是标准的）而不将您的图像带入照片成像软件以在不损失质量的情况下正确调整大小。如果没有足够的信息来拉伸和填充分配的像素量，DPI 质量在这里可能很重要。

【参考方案10】：

使用 标签的另一个好处与 SEO 有关 - 即您可以在图像标签的 ALT 属性中提供有关图像的附加信息，而通过 CSS 指定图像时无法提供此类信息在这种情况下，搜索引擎只能索引图像文件名。与 CSS 方法相比，ALT 属性绝对赋予 标签 SEO 优势。这就是为什么在我看来，最好使用 标记指定您想要在图像搜索结果（例如 Google 图像搜索）中排名良好的图像。

【讨论】：

background-images ALT 值可以在站点地图中定义。 google.com/schemas/sitemap-image/1.1

【参考方案11】：

前景 = img.

背景 = CSS 背景。

【讨论】：

当然，但是“菜单”按钮旁边的小向下箭头指示器或其他类似元素呢？你如何对前景或背景进行分类？

@dudewad 我会说前景，因为它们（视觉上）位于页面的“顶层”，叠加在其他元素上。

【参考方案12】：

仅在必要时使用背景图片，例如带有平铺图像的容器。

使用 IMAGES 的主要优点之一是它更适合 SEO。

【讨论】：

可能是因为你可以使用alt属性。

这不取决于您是否想要针对该特定图像进行 SEO 吗？我不明白您为什么要在属于页面样式的图像上进行 SEO，而不是内容（例如，您的联系页面上的电子邮件图标）。所以实际上，我宁愿扭转你的说法。仅在必要时使用图像（即与内容相关、与印刷相关和/或与 SEO 相关）。

【参考方案13】：

使用背景图片，您需要绝对指定尺寸。如果您实际上并不事先了解它们或无法确定它们，这可能是一个严重的问题。

<img /> 的一个大问题是覆盖。如果我想在我的图像上添加 CSS 内阴影 (box-shadow:inset 0 0 5px rgb(0,0,0,.5)) 怎么办？在这种情况下，由于<img /> 不能有子元素，你需要使用定位并添加空元素，这相当于无用的标记。

总之，这是相当情境化的。

【参考方案14】：

应该使用background-image 的其他几个场景：

当鼠标悬停在图像上时，您希望图像发生变化。 当您想为图像添加圆角时。如果使用img，图片会从圆角漏出。

【讨论】：

你其实可以这样做：img border-radius: 10px;

@RafcioKowalsky 你是对的。不记得 border-radius 不工作的确切情况。

【参考方案15】：

在多个皮肤或设计版本的情况下使用 CSS background-image。 Javascript 可用于动态更改元素的类，这将迫使它呈现不同的图像。有了IMG标签，可能会比较麻烦。

【讨论】：

你也可以动态改变图片标签的src属性，就像改变一个类一样简单

@sanchothefat，是的，但是，在这种情况下，图像源需要保存在 JS 中而不是 CSS 中。 IMO css 文件更适合保留文件名。

【参考方案16】：

这里有一个技术考虑：图像会动态生成吗？在 HTML 中生成 <img> 标记往往比尝试动态编辑 CSS 属性要容易得多。

【讨论】：

那么内联样式呢？这个问题真的不能由这个想法决定。

也许我应该这样说：您更愿意使用 DOM 元素还是元素属性？

在 09 年可能值得考虑使用 bacl，但对于 jQuery，这几乎不是问题。在元素上切换 css 或类比切换元素更容易、更流畅。

【参考方案17】：

图片的大小呢？如果我使用 img 标签，浏览器会缩放图像。如果我使用 css 背景，浏览器只会从较大的图像中截取一块。

【参考方案18】：

关于使用 CSS TranslateX/Y 动画图像（动画 html 的正确方法） - 如果您使用 Chrome 时间轴记录 CSS 背景图像动画与 IMG 标签动画，您会发现绘制时间大大缩短对于 CSS 背景图像。

【参考方案19】：

还有一个原因！如果您有响应式设计并希望通过媒体查询为设备分配低、中和高分辨率图像的使用，那么您也应该使用背景。

【讨论】：

maarten，terscheling 不是 Pipeable 我从 Vincent willems 那里听到的。那么你认为它如何在 PyMol 上工作

请参阅文档了解它的可管道性pieterpeitshoeve.nl/rondleiding

@Maarteen，我想现在可以使用 html 5 图片和源标签来完成

【参考方案20】：

另外，我有一个图片大小不一致的图库部分，因此即使这些图片显然被视为内容，我也会使用背景图片并将它们放在具有设定大小的 div 中。这类似于 facebook 在他们的相册中所做的......

【参考方案21】：

img 是一个 html 标签是有原因的，因此应该使用它。用于参考或说明事物，例如：在文章中。

此外，如果图像有意义或必须可点击，则 img 优于 css 背景。对于所有其他情况，我认为可以使用 css 背景。

虽然，这是一个需要反复讨论的话题。

来自法国巴黎的网络学生

【参考方案22】：

只是要添加一个小标签，如果您希望用户能够“右键单击”和“保存图像”/“保存图片”，则应使用 img 标签，因此如果您打算将图像提供为其他人的资源。

使用背景图片（据我所知，在大多数浏览器上）会禁用直接保存图片的选项。

【参考方案23】：

一个小的输入， 我遇到了响应式图像的问题，即使是小图像，也会将 iphone 上的渲染速度减慢一分钟：

<!-- Was super slow -->
<div class="stuff">
    <img src=".."  />
</div>

但是当切换到使用背景图片时，问题就消失了，这仅在针对较新的浏览器时才可行。

【讨论】：

您对这种行为有任何支持或解释吗？

对不起，我不知道为什么它会减慢页面爬行速度。也许iphone上浏览器中的re-flow资源很少。

【参考方案24】：

HTML 用于内容，CSS 用于设计。图像是否必要，是否需要由屏幕阅读器读取？如果答案是肯定的，则将图像放入 HTML。如果纯粹是为了造型，那么可以使用 CSS 中的 background-image 属性来注入图片。就像这里很多人已经提到的那样，如果您愿意，您可以在图像上使用伪元素。

【参考方案25】：

IMG 首先加载，因为 src 在 html 文件本身中，而在 background-image 的情况下，样式表中提到了源，因此图像在样式表加载后加载，从而延迟了网页的加载。

【讨论】：

加上一些浏览器（例如 Firefox 35）似乎会在一段时间后刷新 CSS background-image：如果您打开了多个标签，当您在一段时间后返回标签时，CSS 背景为空白一会儿。

【参考方案26】：

另一个背景图像 PRO：<ul>/<ol> 列表的背景图像。

如果背景图片是整体设计的一部分并且在多个页面上重复出现，请使用它们。最好以背景精灵形式进行优化。

为不属于整体设计的所有图片使用标签，并且很可能只放置一次，例如文章、人物的特定图片以及值得添加到 Google 图片的重要图片。

** 我在<img> 标签中包含的唯一重复图像是站点/公司徽标。因为人们倾向于点击它进入主页，所以你用<a>标签包装它。

【参考方案27】：

另请注意，大多数搜索引擎蜘蛛不会索引 CSS 背景图像，因此背景图像将被忽略，您将无法从搜索引擎获得任何流量（简而言之，没有 SEO 优势）。

所有使用标签定义的图像都被编入索引（除非手动排除），并且如果它们的标题/替代属性和文件名得到适当优化（w.r.t 一些关键字），则可以从搜索引擎中获得流量。

【参考方案28】：

如果您希望图像流畅并缩放到不同的屏幕尺寸，您可以使用 IMG 标签。对我来说，这些图像主要是内容的一部分。对于大多数不属于内容的元素，我使用 CSS sprite 来保持下载大小最小，除非我真的想为图标等设置动画。

【参考方案29】：

当我想让它们在大多数浏览器中支持 100% 可拉伸时，我使用图像而不是背景图像。

【参考方案30】：

如果您只想为页面上的特殊内容或仅一页添加图像，则应使用 IMG 标签，如果您想将图像放在多个页面上，则应使用 CSS 背景图像。