Web前端技术分享：img标签与background插入图片的区别
16lz
2021-03-26
在前端开发的时候经常会需要插入图片作为背景的情况，常用的方式一般是插入<img>标签，或者使用background属性，那么你知道这两种属性有什么区别吗？下面，小千带你了解一下。
img方式
background属性方式
单从代码上看好像通过背景的方式插入图片比较复杂一点，复杂在哪呢？我们看一下背景图的插入，需要写一个容器，并且要给这个容器设定一个宽高才能显示内容，如果容器的高度为0，那么这张图片就插入不进去了。img图片不一样，它属于html标签，相当于内容跟文字一样只要放在页面中就可以展示出来。 除此之外，如果你想要实现文字内容在图片上的效果，可以使用背景图片，img图片上本身是不能放下文字的。
好了，看完了这些是不是明白一点img图片与background图片的区别了呢？我们一起再来总结一下吧
1、img图片直接插入使用，background图片需要写一个容器并设置宽高才能插入使用
2、img图片跟文字一样属于内容，本身是不会让文字显示在图上，background图片属于背景，文字是可以图上的。
希望以上分享能帮到大家。
本文来自千锋教育，转载请注明出处。
©著作权归作者所有：来自51CTO博客作者戏精程序媛的原创作品，如需转载，请注明出处，否则将追究法律责任更多相关文章
- 技巧分享：如何利用CSS属性修改图片颜色？
- 京东技术：用最小的图片格式，打造最优的用户体验
- 为Dynamics CRM注释的图片附件做个预览功能
- 图片上传
- Dynamics 365新特性介绍：在视图中显示图片和提示
- thinkphp上传文件保存2个不同尺寸的图片
- 商品详情平面设计，图片文字的镜像处理
- php 中文网 第十五期——第一课作业
- layui.upload上传图片报错“请求上传接口出现异常”