img 和 background-image 优劣比较

一. 简单来说，img是内容部分的东西，css的background-image是修饰性的东西。

img——从页面元素来说，如果是页面中的图片是作为内容出现的，比如广告图片，比如产品图片，那么这个必然是用img了，因为这个是页面元素内容。页面元素内容最关键的一点就是，当页面没有样式的时候，还是能一眼看过去就知道什么是什么……
background-image—背景图片，修饰性的内容，在页面中可有可无。有，是为了让页面中视觉感受上更美；无，并不影响用户浏览网页获取内容。

二. 区别

1、background-image是背景图片,是css的一个样式。
<img/>是一个块状的元素，是html的一个标签

2、<img/>是一个dom对象，可以使用js进行元素的操作。背景图片不占位置。

3、一般来说，如果是装饰性的图片就使用background-img，如果和文体内容很相关就使用 <img/>。

document.getElementById("id").style.backgroundImage = "url("+currentImage+")";//currentImage图片地址变量。操作背景图片  
document.getElementById("id").style.backgroundImage// 获取css属性

4、在网页中的加载顺序不一样，html中的标签是网页结构（内容）的一部分会在加载结构的过程中加载， 以css背景图存在的图片background-image会等到dom结构加载完成（网页的内容标签全部显示以后）才开始加载， 既网页会先加载标签的内容，再加载背景图片background-image。如果你用引入了一个很大的图片，那么在 这个图片下载完成之前，img后的内容都不会显示。而如果用css来引入同样的图片，网页结构和内容加载完成之后 ，才开始加载背景图片，不会影响你浏览网页内容。
(Ajax加载HTML文件图片不显示的问题,可考虑这方面原因)

5、选择的时候也要兼顾seo和标签语义化，logo最好同时使用背景图和标签。

三.js操作

1、操作标签<img/>

操作	代码
设置属性	document.getElementsByTagName(“img”)[0].setAttribute(“src”,“newSrc”);
设置属性	document.getElementsByTagName(“img”)[0].src=“newSrc”;
获取属性	document.getElementsByTagName(“img”)[0].getAttribute(“src”);
获取属性	document.getElementsByTagName(“img”)[0].src;
获取宽度	document.getElementsByTagName(“img”)[0].style.width;
设置宽度	document.getElementsByTagName (“img”)[0].style.width = “320px”;

2、图片居中
一般来说可以用CSS中的①text-align:center属性，②margin:0 auto或③定位属性”(position)就可以居中。 但是主要还是看你的页面布局是怎样的，是否用了定位。根据这些来判断到底使用怎样的方法来使元素居中。
设置background属性，详细参考

编号	代码	功能
1	background-image:url("");	设置图片的背景图片
2	background-color:#***|colorName|rgba（，，，）;	设置背景色
3	background-position:center;	设置背景图片在父元素中的显示位置，如果您仅规定了一个关键词，那么第二个值将是"center"。接受三种值，百分比
4	background-repeat:repeat|repeat-x|repeat-y|no-repeat|inherit;
5	background-origin: padding-box|border-box|content-box;	规定 background-position 属性相对于什么位置来定位。
6	background-clip: border-box|padding-box|content-box;	background-clip 属性规定背景的绘制区域。剪裁的依据。
7	background-attachment:scroll|fixed|inherit;	属性设置背景图像是否固定或者随着页面的其余部分滚动。
8	background-size:cover;	设置了图片背景no-repeat之后，使用这个属性可以让图片平铺。详细讲解background-size

四、何时使用img标签，何时使用background-image背景图像

在什么情况下更适合使用HTML IMG标签来显示一个图像,而不是一个CSS有背景图像,反之亦然?

如下场景使用img标签比较合适：

• 如果图像是等内容的一部分或图表或人(真正的人,而不是股票图人)，使用Img标签加上alt属性。
• 如果你想打印页面并且你想要的图像包括默认情况下使用IMG。
• 使用IMG(alt文本)图像有一个重要的语义时,比如一个警告图标。这将确保图像的意义可以很好的和user- agents沟通,包括屏幕阅读器。
• 如果你依赖于浏览器缩放图像比例并且可以呈现不错的效果时使用IMG。
• 如果配合 z - index 伸展背景图像来填补它的整个窗口时使用IMG。
• 使用img代替有背景图像可以显著提高性能的动画背景。
• IMG会首先加载因为src在html文件本身中而在有背景图像源是样式表中引入的图像，加载样式表加载后,延迟加载的网页。

如下场景使用background-image属性比较合适：

• 如果图像不是内容的一部分时使用backgrond-image。
• 当图像代替文本使用时使用backgrond-image。
• 如果你想打印页面并且你不想要的图像包括默认情况下使用backgrond-image。
• 如果需要缩短下载时间通过CSS sprites 时使用backgrond-image。
• 如果你只需要展示图像的一部分通过CSS sprites，时使用backgrond-image。
• 如果你需要为不同的屏幕分辨率展示不同的图像使用 media查询时使用backgrond-image。

转自：
https://www.cnblogs.com/momo8238/p/7435309.html

https://www.cnblogs.com/zjBoy/p/3729550.html