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

StackOverflow https://stackoverflow.com/questions/492809

题

什么情况下使用HTML比较合适 IMG 标签来显示图像，而不是 CSS background-image, ，反之亦然？

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

有帮助吗？

解决方案

IMG 的正确使用

  1. 使用 IMG 如果您打算有人 打印您的页面 并且您希望默认包含图像。—周杰伦
  2. 使用 IMG （和 alt 文本）当图像具有重要语义时，例如 警告图标. 。这确保了图像的含义可以在所有用户代理（包括屏幕阅读器）中传达。

IMG 的实用用途

  1. 使用 IMG 加上alt属性如果图像是 部分内容 例如徽标、图表或人物（真人，而非库存照片人物）。—桑乔泰法特
  2. 使用 IMG 如果您依靠浏览器缩放来按与文本大小成比例的方式呈现图像。
  3. 使用 IMG 为了 IE6 中的多个叠加图像.
  4. 使用 IMG 与一个 z-index 为了 拉伸背景图像 填满整个窗口。
    请注意，CSS3 背景大小不再如此；请参阅下面的#6。
  5. 使用 img 代替 background-image 可以显着提高背景动画的性能。

何时使用 CSS 背景图像

  1. 如果图像，请使用CSS背景图像 不是内容的一部分. —桑乔泰法特
  2. 执行时使用CSS背景图像 图像替换文本 例如。段落/标题。—桑乔泰法特
  3. 使用 background-image 如果您打算有人 打印您的页面 并且您不希望默认包含该图像。—周杰伦
  4. 使用 background-image 如果您需要改善下载时间， CSS 精灵.
  5. 使用 background-image 如果您只需要图像的一部分可见，就像 CSS 精灵一样。
  6. 使用 background-image 和 background-size:cover 为了拉伸背景图像以填充整个窗口。

其他提示

这是一个黑色和白色的决定给我。如果图像是内容的一部分，例如标志或图或人（真实的人，而不是股票的照片的人），然后使用<img />标签加上alt属性。对于一切有CSS背景图像。

在其它时间使用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 的更多信息。

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

何时使用 <img />

  1. 当您的形象需要 被搜索引擎索引
  2. 如果与内容有关，则不与设计相关。
  3. 如果您的图像不太小（不是标志性图像）。
  4. 您可以添加的图像 alt 和 title 属性。
  5. 您想要使用打印媒体 CSS 打印的网页中的图像

何时使用 CSS background-image

  1. 图像纯粹用于设计。
  2. 与内容无关。
  3. 我们可以用 CSS3 来玩的小图像。
  4. 重复图像（在博客作者图标中，每篇文章都会重复日期图标等）。

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

浏览器并不总是默认设置为打印背景图像;如果你打算让人们打印页：）

如果你有你的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文件中的相应src标签的<img>属性（假设你没有使用服务器端脚本语言或的 CMS 以自动化的过程）。

此外，如果你不希望用户能够保存图像（虽然我还没有过需要做这个）背景图像是有用的。

关于一样 sanchothefat的答案，但是从不同的方面。我总是问自己：我是否会完全从网站上删除的样式表，就剩余的元素的只有的属于内容？如果是这样，我做我的工作。

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

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

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

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

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

我想添加另外两个参数：

  • 一个 图像 如果您需要的话，标签很好 调整大小 图片。例如。如果原始图像是 100px x 100px，而您希望它是 80px x 80px，则可以设置 img 标签的 CSS 宽度和高度。 我不知道有什么好方法可以使用背景图像来做到这一点。 编辑：现在也可以使用背景图像来完成此操作 background-size CSS3 属性。

  • 使用 背景图 当您需要动态时很好 在精灵之间切换. 。例如。如果您有一个按钮图像，并且希望当光标悬停在该元素上时显示单独的图像，则可以使用包含普通精灵和悬停精灵的背景图像，并动态更改背景位置。

从使用标签还有一个好处是关系到搜索引擎优化 - 即你可以提供有关图像标签的ALT属性的图像的附加信息，而没有办法提供指定通过CSS的图像时，这些信息而在这种情况下只有图像文件名可能被搜索引擎收录。 ALT属性肯定给在标签SEO优势CSS的方法。这是根据我为什么最好是指定要在图片搜索结果中的排名以及图像（如谷歌图片搜索）使用标记。

前景= IMG。

背景= CSS背景

仅在必要时使用例如背景图像容器与该图像瓷砖。

其中主要的利弊，通过使用图片是，它是作为SEO

更好

使用背景图片，你需要绝对指定尺寸。这可能是一个显著问题，如果你真的不知道他们提前或不能确定他们。

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

总之，这是相当情景。

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

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

在多个皮肤或设计的版本的情况下使用CSS背景图像。 JavaScript可以动态地改变的一类的元件，这将迫使它以呈现不同的图像。与IMG标记，它可以是更复杂。

这里的一个技术考虑：将图像动态地生成？它往往是一个更容易生成HTML的标签<img>比尝试动态编辑CSS属性。

关于图像的尺寸是什么？如果我使用img标签，浏览器缩放图像。如果我使用CSS背景，浏览器只切割从所述较大图像的组块。

在使用CSS平移X关于动画影像/ Y（动画HTML的正确方法） - 如果你做的CSS背景图像的浏览器时间轴记录进行动画VS IMG标记进行动画，你会看到油漆时间大大缩短对于CSS背景图像。

有另一个原因！如果你有一个负责任的设计，希望通过媒体查询拆分低，中使用率和高清晰度图像的设备，你应该使用的背景为好。

另外，我有具有不一致的图像画廊截面尺寸，从而即使这些图像被明显地考虑内容，我使用的背景图像，并用一组尺寸居中它们的div。这类似于Facebook并在他们的专辑..

<强> IMG 为原因一个HTML标记，因此其应该被使用。对于引用或说明的东西，人们e.g：在文章

此外，如果在图像的 具有意义 或必须是可点击的一个的 IMG 比的 CSS背景更好。对于所有其他情况，我想，一个的 CSS背景可以使用。

虽然，它是需要被反复讨论的主题。

来自法国巴黎的Web学生

只是一个小的补充，你应该如果你希望用户能够“右击”和“保存图像”使用img标签/“保存图片”，所以如果你打算提供的图像为他人的资源。

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

一个小的输入， 我曾与响应图像放慢iPhone上的渲染长达一分钟，即使有小的图像问题：

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

但切换到使用背景图像问题消失时，这是如果定位新的浏览器唯一可行的。

IMG负荷第一因为src处于background-image的情况下，HTML文件本身，而源在样式表中提到这样样式表加载后的图像的负荷，延缓了网页的加载。

HTML是用于内容和CSS是设计。是图像必要的，它需要通过屏幕阅读器拾起？如果答案是肯定的，然后把图像中的HTML。如果是单纯的造型，那么你可以使用background-image属性在CSS注入图像。正如很多人在这里已经提到，你就可以使用伪元素的图像，如果你喜欢。

另外请注意，大多数搜索引擎蜘蛛不索引CSS背景图片，因此背景图像将被忽略，你将无法获得来自搜索引擎的任何流量（总之没有SEO的好处）。

其中与标签定义的所有图像被索引（除非手动除外）和来自搜索引擎的流量可以带来，如果他们的标题/ ALT属性和文件名被适当优化（w.r.t一些关键字）。

如果你想要的图像，其将流体和规模不同的屏幕尺寸，您可以使用IMG标记。对我来说，这些图片大多是内容的一部分。对于不属于内容的一部分大多数元素，我使用CSS精灵保持下载量最小，除非我真的想动画图标等。

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

如果您要添加的图像只显示在网页上的特殊内容或只有一个页面，你应该使用IMG标记，如果你想要把图像在一个以上的页面，那么你应该使用CSS背景图像。

<强>另一个背景图像PRO：背景图像用于<ul> / <ol>列表

。

使用背景图像，如果它们是整体的设计的一部分，并且重复在多个页面上。优选地，在背景子画面形式进行优化。

使用标签不属于整体设计的一部分，并且最有可能放置一次，喜欢的文章，人们特定的图像，而重要的图像，值得加入到 Google图片的所有图像。

**我在一个<img>标签包围的唯一重复的图像是网站/公司徽标。因为人们往往会点击它转到主页，这样你用<a>标签包装它。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top