前端技巧|img标签与background插入图片的区别

      在前端开发的时候经常会需要插入图片作为背景的情况，常用的方式一般是插入<img>标签，或者使用background属性，那么你知道这两种属性有什么区别吗？

      img方式

      background属性方式

      单从代码上看好像通过背景的方式插入图片比较复杂一点，复杂在哪呢？我们看一下背景图的插入，需要写一个容器，并且要给这个容器设定一个宽高才能显示内容，如果容器的高度为0，那么这张图片就插入不进去了。img图片不一样，它属于html标签，相当于内容跟文字一样只要放在页面中就可以展示出来。 除此之外，如果你想要实现文字内容在图片上的效果，可以使用背景图片，img图片上本身是不能放下文字的。

      好了，看完了这些是不是明白一点img图片与background图片的区别了呢？我们一起再来总结一下吧

      1、img图片直接插入使用，background图片需要写一个容器并设置宽高才能插入使用

      2、img图片跟文字一样属于内容，本身是不会让文字显示在图上，background图片属于背景，文字是可以图上的。

      学习web前端，可以参考千锋web前端培训班提供的web前端学习路线，该学习路线对从零基础小白到web前端初级开发工程师，web前端高级开发工程师，后面的web前端大神级开发工程师都有一个明确清晰的指导，根据千锋web前端培训机构提供的web前端学习路线图可以让你对学习web前端开发需要掌握的知识有个清晰的了解，并快速入门web前端开发。想要获取前端完整学习路线和免费的学习资料可以添加我们的web前端技术分享交流qq群：857920838  加群找群管理领取即可，等你来哦~~