Web前端技术分享：img标签与background插入图片的区别

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

img方式

background属性方式

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

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

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

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

希望以上分享能帮到大家。

本文来自千锋教育，转载请注明出处。