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

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

有关MDN转换的更多信息.

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

何时使用

当您的图像需要被搜索引擎编入索引时

如果它与不设计的内容有关系.

如果您的图像不是太小(不是图标).

您可以添加alt和title属性的图像.

您要使用print media css打印的网页中的图像

何时使用CSS background-image

纯粹用于设计的图像.

与内容无关.

我们可以用CSS3玩的小图片.

重复图像(在博客作者图标中,每个文章等将重复日期图标).

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

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

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

例如,假设您有以下HTML:

......和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相应标记的属性(假设您没有使用服务器端脚本语言或CMS来自动执行该过程).

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

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

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

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

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

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

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

我想补充另外两个论点:

一个IMG如果你需要标记好调整图像.例如,如果原始图像是100像素×100像素,并且您希望它是80像素×80像素,则可以设置img标记的CSS宽度和高度.我不知道使用背景图像做任何好方法.编辑:现在也可以使用background-sizeCSS3属性使用背景图像完成.

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

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

前景= img.

背景= CSS背景.

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

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

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

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

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

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

当您希望图像在鼠标悬停在其上时发生变化.

如果要为图像添加圆角.如果使用img,图像会从圆角漏出.

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

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

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

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

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

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

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

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

来自法国巴黎的网络学生

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

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

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

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

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