background-image属性值
url()中可以写绝对路径，也可以写相对路径，甚至也可以写其他域名下的图片资源。url()中的路径加不加引号都可以。
绝对路径写法：
background-image:url("/imgs/1.jpg");
//或
background-image:url(/imgs/1.jpg);
相对路径写法：
background-image:url(“../imgs/1.jpg”);
//或
background-image:url(../imgs/1.jpg);
img定义和用法
img 元素向网页中嵌入一幅图像。
请注意，从技术上讲，<img> 标签并不会在网页中插入图像，而是从网页上链接图像。<img> 标签创建的是被引用图像的占位空间。
<img> 标签有两个必需的属性：src 属性 和 alt 属性。
区别
- 浏览器上下文的区别
使用div+background-image实现图片显示的时候，该块级元素的上下文为普通的块级上下文
而使用img显示图片的时候，上下文为img上下文，可以对图片进行另存为等操作。
- 块大小对图片显示的区别
下面例子中，img和div的大小为600px*350px， 图片大小为128px*128px
div+background-image的默认样式如下图所示
默认样式有几个注意点
- 当原始图片比设置的宽高小，会在块中重复显示以铺满块。
- 当原始图片比设置的宽高大，图片会在块中截断。
div+background-image可以通过backgroung-size， background-rpest， background-position， background-origin， background-clip 等CSS样式来调整显示的样式，当然也可以调整为和img的默认样式一样
div{
background-size: 600px 350px;
}
div+background-image通过几种样式的组合可以调整出各种各样的显示效果，
使用img标签显示图片的话，图片实际显示的宽高就是设定的宽高，没有别的办法来设定显示的样式，可以看出一旦设定的宽高比和原来图片的宽高比不一致，显示出的图片就会有拉伸的现象。
但当你只设置宽或只设置高，高或者宽就会按照原来的宽高比自动设置。
选择
- 选择div+background-image的情况
根据div+background-image的特性可以得出选择使用这种方法实现显示图片的情况
- 图片用来当作块的背景的情况，这也是这种方法最原始的用法
- 由于这种方法的上下文是普通的块级上下文，没有图片另存为等操作，所以可以用于不希望用户能轻易保存图片的情况
- 可以用于宽高给定的同时不希望图片拉伸且允许图片截断的情况
- 选择img标签的情况
img是一个语义化标签，在刚接触html+css的时候肯定有接触到语义化的概念以及渐进增强的概念，虽然现在的前端都不太注重渐进增强，但选用img标签能很好的适应语义化和渐进增强。选用它的情况如下
- 有明确的语义化要求的情况下选用img标签
- 图片是页面的组成部分而不是修饰部分的时候选用img标签
- 显示图片只给定宽或高且不能截断图片并要保证图片宽高比的情况下选用img标签
————————————————
版权声明：本文为CSDN博主「若即」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_17004327/article/details/78264763