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

Question

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

sys*_*USE 778 html css image background-image

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

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

Answer 1

sys*_*USE 768

正确使用IMG

使用IMG,如果你打算让人们打印您的网页,你想被默认包含在图像.- JayTee
当图像具有重要的语义含义时使用IMG(带alt文本),例如警告图标.这确保了图像的含义可以在所有用户代理(包括屏幕阅读器)中传达.

IMG的实用用法

IMG如果图像是内容的一部分,例如徽标或图表或人(真人,而不是股票照片人),请使用加号alt属性.- sanchothefat
使用IMG,如果你依赖于浏览器的缩放比例,以文字的大小呈现图像.
使用IMG 了在IE6多的重叠影像.
~~IMG与a z-index一起使用以拉伸背景图像以填充整个窗口.~~
请注意,CSS3 background-size不再适用; 见下面的#6.
使用img而不是background-image可以显着提高背景动画的性能.

何时使用CSS background-image

如果图像不是内容的一部分,请使用CSS背景图像.- sanchothefat
在进行文本图像替换时使用CSS背景图像,例如.段落/头.- sanchothefat
使用background-image,如果你打算让人们打印您的网页,你不想被默认包含的图像.- JayTee
使用background-image,如果你需要提高下载时间,与CSS的精灵.
使用background-image,如果你需要对图像的仅一部分是可见的,与CSS的精灵.
使用background-image与background-size:cover以舒展的背景图像,以填补其整个窗口.

*实用的背景图像*:当你不想让头发松散垂直居中问题(垂直尺寸不同的图像);) (51认同)
是的,垂直居中问题 - 引入Flexbox! (12认同)
我仍然对文本替换部分的背景图像感到满意.我看到人们使用背景图像然后使用text-indent:-9999px作为文本.但是我知道像这样的文字缩进曾经对SEO不好,我想它仍然必须是一些搜索引擎.但最重要的是,如果您关闭图像但在图像上留下css消失,但文本仍然在屏幕外.就我而言,图像上的alt文本用于if图像不显示,因此img标签更好. (3认同)
@BinaryFunt - `<div class ="my-css-page-styles"style ="background-image:url(blah.png);"> </ div>`这样你可以在CSS样式表中设置样式但是如果背景图片更像是一个内容问题而不是风格,那么你仍然是从HTML方面编辑它. (3认同)
这里难道没有一个语义参数来创建可读的 HTML 来准确地描述正在呈现的内容吗？例如，如果你在代码中看到 `<img>`，你**知道**那里会有一个图像。而如果你看到 `<div>` 并且它有一个图像的事实隐藏在另一个文件中的某个地方，这似乎是低效的可理解性。想想看，你是否仍然可以使用没有 `src` 的 `<img>` 标签并通过 CSS 应用 `background-image` - 或者这是疯狂的谈话？ (3认同)
在IMG的实用用法的第5点似乎有一个clickbait - 指向一篇关于化妆品的日本博客文章.链接是www.ajaxline.com/browsers-performance-in-dependence-of-html-coding [请勿点击此处] (2认同)

Answer 2

rob*_*rke 287

这对我来说是一个黑白分明的决定.如果图像是内容的一部分,例如徽标或图表或人(真人,而不是股票照片人),则使用<img />标记加alt属性.其他一切都有CSS背景图片.

另一次使用CSS背景图像是在进行文本的图像替换时.段落/头.

个人我讨厌当我无法复制"文本",因为它实际上是一个图像.叫我懒,但嘿...... (56认同)
使用图像替换的@TheoScholiadis并不意味着使用图像而不是文本,而是使用CSS以某种方式隐藏文本并使用CSS将图像作为背景提供.该文件在语义上保持不变. (4认同)
这是一个公平的观点,但是文本的图像替换(例如标题)肯定会要求您添加"alt"以便屏幕阅读器阅读它？或者,如果没有显示图像,您仍然可以获得标题？是的,一个标题,然后风格会更好,但你肯定要文本？ (2认同)

Answer 3

Rob*_* JW 106

我很惊讶没人提到这个: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);
}

Run Code Online (Sandbox Code Playgroud)

这样可以节省任何形式的JavaScript或jQuery的动画褪色的<img/>的src.

有关MDN转换的更多信息.

如果您阅读了链接的MDN文章(或w3c规范),您会发现背景图像不是可动画的属性之一,任何执行此操作的浏览器(chrome)都不符合Web标准.也就是说,我认为它应该是,这是一个很好的简单效果所以我很失望它不是标准的一部分. (4认同)
这不是一个好理由.你可以有一个带有2个重叠图像的div,以及下面的css:`#some_div {transition:opacity 0.5s; }`,``#some_div:hover #top_img {opacity:0; }` (3认同)

Answer 4

小智 71

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

何时使用 <img />

当您的图像需要被搜索引擎编入索引时
如果它与不设计的内容有关系.
如果您的图像不是太小(不是图标).
您可以添加alt和title属性的图像.
您要使用print media css打印的网页中的图像

何时使用CSS background-image

纯粹用于设计的图像.
与内容无关.
我们可以用CSS3玩的小图片.
重复图像(在博客作者图标中,每个文章等将重复日期图标).

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

Answer 5

Jay*_*Tee 51

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

听起来像:PRO - 如果您希望默认打印图像,请使用IMG.CON - 如果您不希望默认打印图像,请使用背景图像.好一个! (8认同)
我认为这个想法是使用单独的仅打印CSS样式来隐藏图像或将其更改为更合适的图像. (7认同)

Answer 6

Ste*_*son 51

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

例如,假设您有以下HTML:

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

Run Code Online (Sandbox Code Playgroud)

......和CSS:

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

Run Code Online (Sandbox Code Playgroud)

几天后,您可以更改图像的位置.您所要做的就是更新CSS:

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

Run Code Online (Sandbox Code Playgroud)

否则,您必须更新每个HTML文件中src相应<img>标记的属性(假设您没有使用服务器端脚本语言或CMS来自动执行该过程).

如果您不希望用户能够保存图像,背景图像也很有用(尽管我从未需要这样做).

背景图像当然可以保存一些最小的视图来源,只是不像右键单击图像那么容易. (14认同)
Firefox浏览器.右键点击."查看背景图片".没那么难. (2认同)

Answer 7

Tör*_*bor 45

与sanchothefat的答案大致相同,但来自不同方面.我总是问自己:如果我要从网站上完全删除样式表,剩下的元素是否只属于内容？如果是这样,我做得很好.

Answer 8

Dyi*_*yin 41

一些答案使这里的场景过于复杂.这是一个死的简单情况.

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

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

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

此外,不要考虑这两种技术,只是因为你希望"打印机友好".另外,请勿使用CSS隐藏SEO的观点.如果您发现自己在CSS文件中管理自己的内容,那么您就会陷入困境.对于什么是内容与否,这只是一个微不足道的决定.其他方面都应该被忽略.

Answer 9

And*_*eck 28

我想补充另外两个论点:

一个IMG如果你需要标记好调整图像.例如,如果原始图像是100像素×100像素,并且您希望它是80像素×80像素,则可以设置img标记的CSS宽度和高度.~~我不知道使用背景图像做任何好方法.~~编辑:现在也可以使用background-sizeCSS3属性使用背景图像完成.
当您需要在精灵之间动态切换时,使用背景图像是很好的.例如,如果您有一个按钮图像,并且希望在光标悬停在元素上时显示单独的图像,则可以使用包含普通和悬停精灵的背景图像,并动态更改背景位置.

这是一个非常好的答案,特别是调整大小点.人们会争辩说你可以使用背景大小,但如果你试图支持旧浏览器,那么它不一定是最好的方法. (2认同)
谢谢@Kareem.我看到这是用CSS3引入的,当我最初回答时它还不存在.我编辑了我的答案以反映这一点. (2认同)

Answer 10

Pav*_*dov 18

使用<IMG>标签的另一个好处是与SEO相关 - 即您可以在图像标签的ALT属性中提供有关图像的其他信息,而在通过CSS指定图像时无法提供此类信息只有图像文件名可以由搜索引擎索引.ALT属性肯定赋予<IMG>标签SEO优于CSS方法的优势.这就是为什么我认为最好使用<IMG>标签指定您想要在图像搜索结果(例如Google图像搜索)中排名的图像.

Answer 11

cjk*_*cjk 17

前景= img.

背景= CSS背景.

当然,但是"菜单"按钮旁边的小向下箭头指示器或其他此类元素呢.你如何对前景或背景进行分类？ (4认同)

Answer 12

Mar*_*ein 14

仅在必要时使用背景图像,例如具有图像的容器.

使用IMAGES的主要PROS之一是它对SEO更好.

这不取决于你是否想要特定图像的搜索引擎优化？我不明白为什么你会在图像上搜索SEO,而图像是页面样式的一部分,而不是内容(例如联系页面上的电子邮件图标).所以实际上,我宁愿转过身.仅在必要时使用IMAGES(与内容相关,与打印相关和/或与SEO相关). (4认同)
可能是因为您可以使用alt属性. (3认同)

Answer 13

小智 12

使用背景图像,您需要绝对指定尺寸.如果您事先并未事先了解它们或无法确定它们,这可能是一个重大问题.

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

总之,这是非常情境化的.

Answer 14

Lam*_*bda 11

background-image应该使用的其他一些场景:

当您希望图像在鼠标悬停在其上时发生变化.
~~如果要为图像添加圆角.如果使用img,图像会从圆角漏出.~~

Answer 15

MK_*_*Dev 9

在多个外观或设计版本的情况下使用CSS background-image.Javascript可用于动态更改元素的类,这将强制它呈现不同的图像.使用IMG标签,可能会更棘手.

@sanchothefat,但是,在这种情况下,图像源需要保存在JS而不是CSS中.IMO css文件更适合保存文件名. (3认同)

Answer 16

Bry*_* M. 7

这是一个技术考虑因素:图像是否会动态生成？<img>在HTML中生成标记往往比尝试动态编辑CSS属性容易得多.

Answer 17

小智 7

那么图像的大小呢？如果我使用img标签,浏览器会缩放图像.如果我使用css background,浏览器只会从较大的图像中剪切一块.

Answer 18

eiv*_*s88 7

关于使用CSS TranslateX/Y制作动画图像(动画html的正确方法) - 如果您对CSS背景图像进行动画制作,而动画的IMG标签动画,您将看到CSS的绘画时间明显缩短背景图像.

Answer 19

Maa*_*ten 7

还有另一个原因!如果您有响应式设计并希望通过媒体查询分割设备的低,中和高分辨率图像的使用,您也应该使用背景.

Answer 20

小智 6

img是一个html标签,因为它应该被使用.为了引用或说明事物,人们例如:在文章中.

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

虽然,这是一个需要反复讨论的主题.

来自法国巴黎的网络学生

Answer 21

小智 6

此外,我有一个画廊部分,图片大小不一致,所以即使这些图像显然被认为是内容,我使用背景图像并将它们居中在具有设定大小的div中.这与facebook在他们的专辑中所做的类似.

Answer 22

dou*_*ald 5

只需要添加一个小的,如果您希望用户能够"右键单击"和"保存图像"/"保存图片",则应使用img标记,因此如果您打算将图像作为资源提供其他.

使用背景图像(据我所知,在大多数浏览器中)禁用直接保存图像的选项.

Answer 23

win*_*ers 5

一个小的输入,我有响应图像的问题,使iphone上的渲染速度减慢长达一分钟,即使是小图像:

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

Run Code Online (Sandbox Code Playgroud)

但是当切换到使用背景图像时,问题就消失了,这只有在针对较新的浏览器时才可行.

归档时间：	16 年，7 月前
查看次数：	357463 次
最近记录：	7 年，5 月前