难度级别:中级及以上 提问概率:65%
面试官当然不会问如何使用img标签或者background来加载一张图片,这些知识点都很基础,相信只要从事前端开发一小段时间以后,就可以轻松搞定加载图片的问题。但很多人习惯用img标签,很多人习惯用background背景,那么在加载图片的时候,他们有哪些区别呢,什么情况下该用哪一个呢?
1 对容器的要求
虽然两种方式都能显示图片,但日常开发中,img标签即便在不设置宽高的情况下,依然可以将图片渲染出来,只不过我们为了更完美的布局,为其设置一定的显示区域。而background背景图片更依托于DOM元素,如果元素是行内元素,或者未设置宽高,图片则不能被渲染出来。
另外,img标签的宽高设置可以直接改变图片的显示大小,但background背景属性则需要依赖更多的CSS属性设置。但属性复杂也为我们的网页渲染带来了更多的效果,例如background-size可以设置图片的尺寸,或者相对于自身DOM元素的宽高适应情况;例如background-repeat可以设置图片是否平铺渲染