工作中用Img标签和用background-image的区别？以及什么时候建议用Img标签？什么时候用背景图

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

1. 如果图像是等内容的一部分或图表或人，使用Img标签加上alt属性。
2. 如果需要打印页面并且默认情况下打印图片则使用IMG。
3. 使用IMG(alt文本)图像有一个重要的语义时,比如一个警告图标。这将确保图像的意义可以很好的和user-agents沟通,包括屏幕阅读器。
4. 如果你依赖于浏览器缩放图像比例并且可以呈现不错的效果时使用IMG。
5. 如果配合 z - index 伸展背景图像来填补它的整个窗口时使用IMG。
6. 使用img代替有背景图像可以显著提高性能的动画背景。

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

1. 如果图像不是内容的一部分时使用backgrond-image。
2. 当图像代替文本使用时使用backgrond-image。
3. 如果你想打印页面并且你不想要的图像包括默认情况下使用backgrond-image。
4. 如果需要缩短下载时间通过CSS sprites 时使用backgrond-image。
5. 如果你只需要展示图像的一部分通过CSS sprites时使用backgrond-image。
6. 如果你需要为不同的屏幕分辨率展示不同的图像使用 media查询时使用backgrond-image
7. 是从用户体验角度来讲的。如果你在body 中通过img标签引入一张图片，那么用户在浏览网页的时候，是可以直接在图片上右键，然后另存为，把图片保存下来，但是background是不可以的；
   
    -----------------------------------------------------------------------------------------------------------------------------
8. .backgroundImg{   width: 20px;
9.     height: 20px;
10.     background-image: url("./images/btn_book.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;}