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

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

img方式

1.png

background属性方式

2.png

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

3.png

4.jpg

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

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

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

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

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

猜你喜欢

转载自blog.51cto.com/15128702/2672897