前端插入图片(img)和背景图片(background)应用区别

前端插入图片(img)和背景图片(background)应用区别

• img
  1、会占用资源数

• background 背景图
  1、图片的尺寸非常好控制 css3中 的 background-size

div{
	background:url(img_flwr.gif);
	background-size:80px 60px;
	background-repeat:no-repeat;
}

2、背景图位置可以 很好的控制
3、背景图可以通过构建工具，打包成base64编码放进css中去，不会占用 Http请求数

应用区别

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

1、使用IMG(alt文本)图像有一个重要的语义时,比如一个警告图标。这将确保图像的意义可以很好的和user-agents沟通,包括屏幕阅读器。
2、如果你依赖于浏览器缩放图像比例并且可以呈现不错的效果时使用IMG。
3、如果配合 z - index 伸展背景图像来填补它的整个窗口时使用IMG。
4、使用img代替有背景图像可以显著提高性能的动画背景。
5、IMG会首先加载因为src在html文件本身中而在有背景图像源是样式表中引入的图像，加载样式表加载后,延迟加载的网页。

如下场景使用background-image属性比较合适：
1、如果图像不是内容的一部分时使用backgrond-image。
2、当图像代替文本使用时使用backgrond-image（避免出现无语义化标签）。
3、如果需要缩短下载时间通过CSS sprites 时使用backgrond-image。
4、如果你只需要展示图像的一部分通过CSS sprites，时使用backgrond-image。
5、如果你需要为不同的屏幕分辨率展示不同的图像使用 media查询时使用backgrond-image。