<img />是一个块状元素 他是一个图片
background-image是只能看 的
<img/>是一个document对象 他是可以操作的 比如更换img Src的路径 达到更换图片 的目的
也可以移动他的位置 从document 中移除 等等之类的 操作
background 是CSS样式
img 是HTML标签 本质上存在很大区别
基本上 设置按钮 的样式 会用到background 页面整体的 背景也会用到
商城类 网站的 那些 缩略图 比如京东商城 那些 商品 都是IMG标签 你点的那些按钮 样子都不一样那些都是 background-image
/* 超小屏幕（手机，小于 768px） 没有任何媒体查询相关的代码*//* 小屏幕（平板，大于等于 768px） */
/* 中等屏幕（桌面显示器，大于等于 992px） */
/* 大屏幕（大桌面显示器，大于等于 1200px） */
纯CSS无法实现，透明的地方也属于图片你可以分成两个图层，图层1设置背景色或图片，图层2为gif透明，这样可以实现
<html>
<head>
<style>
span{background:#002299}
.img{background:url(xxx.gif) no-repeat}
</style>
</head>
<body>
<span><img src="图片路径" title="" alt=""/></span>
</body>
