关键词：
一. 简单来说，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图片地 址变量。
获取css属性document.getElementById("id").style.backgroundImage。
4、在网页中的加载顺序不一样，html中的标签<img/>是网页结构（内容）的一部分会在加载结构的过程中加载， 以css背景图存在的图片background-image会等到dom结构加载完成（网页的内容标签全部显示以后）才开始加载， 既网页会先加载标签<img/>的内容，再加载背景图片background-image。如果你用引入了一个很大的图片，那么在 这个图片下载完成之前，img后的内容都不会显示。而如果用css来引入同样的图片，网页结构和内容加载完成之后 ，才开始加载背景图片，不会影响你浏览网页内容。
5、选择的时候也要兼顾seo和标签语义化，logo最好同时使用背景图和<img/>标签。
三.js操作
操作标签<img/>
1、设置属性document.getElementsByTagName("img")[0].setAttribute("src","newSrc"); 获取属性document.getElementsByTagName("img")[0].getAttribute("src");
或者：设置document.getElementsByTagName("img")[0].src="newSrc"; 获取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的区别和具体使用时机
最近在使用图片过程中，纠结到底使用img标签还是使用background-image属性，翻阅资料和百度后作出下列理解。简单来说img是内容部分的东西，background-image是修饰性的东西。img从页面元素来说，如果是页面中作为内容出现的图片，... 查看详情
img和background-image的区别
background-image是背景图片，是css的一个样式 <img/>是一个块级元素，它是一个图片，是html的一个标签 background-image是只能看的 <img/>是可以操作的。比如更换imgsrc的路... 查看详情
好程序员分享该如何选择background-image和img标签
好程序员分享该如何选择background-image和img标签，用img标签 如果你希望别人打印页面时候包含这张图片请使用img标签 当这张图片有非常有意义的语义，比如警告图标，请使用img标签及它的alt属性。这样意味着你可以... 查看详情
opencv使用——玉米粒识别和优劣判断(代码片段)
运行环境：python3.6.9opencv3.4.10 importcv2importnumpyasnpfont=cv2.FONT_HERSHEY_COMPLEXkernel=np.ones((7,7),np.uint8)img=cv2.imread(‘corn.jpg‘,1)#1代表深度8，3通道img_orgin=imgcv2.imshow(‘orgin‘,img)cv2.wait 查看详情
css中，div的background-image和img的图片可以放大或者缩小像素吗？
有时提供的背景图片不够大，想要在网页中放大你好，背景不能放大和缩小的。追问那如果图片太小，只能换图片了吗？追答设置背景图片的同时，你可以设置背景颜色。当图片不够大的时候，就会被颜色填充上。背景图片设计... 查看详情
asp.net网站css中background-image:url路径的问题
第一中，如下所示的目录结构，background-Image：url的路径怎么写第二种，这种情况下怎么写就是第二种目录，让我头痛，怎么写背景图总是显示不了，求解！同级文件夹的话，直接写名字就好了，就是你的第一种情况url就是img.jpg... 查看详情
用 php 将 img 替换为 background-image div
】用php将img替换为background-imagediv【英文标题】：Replaceimgtobackground-imagedivwithphp【发布时间】：2015-10-2505:09:32【问题描述】：有没有办法用下面的div标签替换img标签？原始html：<divclass="article"><imgsrc="/images/img-1.jpg"></div>... 查看详情
哪个是创建圆形按钮的更好方法：<img> 或 background-image？ [复制]
】哪个是创建圆形按钮的更好方法：<img>或background-image？[复制]【英文标题】：Whichisabetterwaytocreatecircularbuttons:<img>,orbackground-image?[duplicate]【发布时间】：2013-03-1801:13:59【问题描述】：我有两种创建圆形按钮的方法：http:... 查看详情
数据结构[双链表的实现，以及双链表和单链表之间的比较，链表和顺序表的优劣](代码片段)
...xff1a;🥇双链表和单链表的比较🥇链表和顺序表的优劣🥇双链表简单介绍：博主在前面介绍了单链表，并实现了它的基本功能，详细请看博客单链表，相信有一点链表基础的同学肯定会知道，单 查看详情
image按比例缩放(img容器比例固定，但是图片和容器比例不同)(代码片段)
1.作为background-image<divclass="zoomImage"style="background-image:url(images/test1.jpg)"></div>.zoomImage width:100%; height:0; padding-bottom:100%; overflow:hidden; background-positi 查看详情
到底该用img还是background-image？(代码片段)
在前端页面的实现过程中，我们经常会遇到这个情况：有一个盒子，盒子里面需要放一张图片。这个时候，我们既可以通过添加image标签来实现，也可以通过设置背景图的形式实现，哪种更好呢？一般情况下，可能就是哪种顺手... 查看详情
vue的style绑定显示background-image
data(){return{img:require(‘你的json资源路径‘)}}:style="{backgroundImage:‘url(‘+img+‘)‘}" 查看详情
mysql与mssql的区别及优劣比较？
MYSQL与MSSQL的区别及优劣比较？MySQL可以说是MSSQL的简化版本。理念相同，但MySQL的实现比MSSQL的需求低。MySQL是一个免费的、开放源代码的SQL数据库，所以免费的MYSQL很受欢迎，php+mysql，MySQL数据库专用于PHP网站的，一般用在PHP的网... 查看详情
background-image背景图片的设置
background-image背景图片的设置属性：background-image:url(img/banner.jpg); 1、设置背景图的宽度background-size:400px; 2、设置背景图的宽度百分比，以父元素的百分比来设置背景图的宽度和高度，第一个值为宽度，第二值为高度，... 查看详情
r语言计算回归模型残差平方和(residualsumofsquares)实战，并基于残差平方和比较模型优劣
R语言计算回归模型残差平方和(ResidualSumofSquares)实战，并基于残差平方和比较模型优劣 目录 查看详情
关系型数据库和非关系型数据库的优劣对比？
关系型数据库和非关系型数据库的优劣对比？关系型数据库和非关系型数据库的优劣对比？关系型数据库最典型的数据结构是表，由二维表及其之间的联系所组成的一个数据组织。优点：1、易于维护：都是使用表结构，格式一... 查看详情
background-image背景图片怎么用css缩小
参考技术Acss3里支持背景图缩放，用background-size属性，但是这个属性目前只有firfoxchromesafarioperaie9+浏览器支持如果想更全面的支持，可以不要做背景用<img/>限定width、height，指定position:absolute;和left、top位置，z-index设为-1 查看详情
css3——background属性详解
...0,0.3);;特殊值：transparent，透明色：background-color:transparent;background-image属性用于为一个元素设置一个或多个背景图片，多个背景图片之间以逗号隔开。一张图片：background-image:url(img/a.jpg);多张图片：background-image:url(img/a.jpg),url(img/b.... 查看详情