img标签和background-image的区别和具体使用时机
最近在使用图片过程中,纠结到底使用img标签还是使用background-image属性,翻阅资料和百度后作出下列理解。
简单来说img是内容部分的东西,background-image是修饰性的东西。
img
从页面元素来说,如果是页面中作为内容出现的图片,比如广告图片、产品图片,那么这个必然是用img
了,因为这个是页面元素内容。页面元素内容最关键的一点就是,当页面没有样式的时候,还是能一眼看过去就知道什么是什么。
img是一个行内元素,HTML标签,是一个document对象,它是可以操作的。比如更换img src的路径可以达到更换图片的目的,也可以移动它的位置,从document中移除等等操作
background-image
背景图片,修饰性的内容,在页面中可有可无。有,是为了让页面中视觉感受上更美;无,并不影响用户浏览网页获取内容。
background-image是背景图片,是css的一个样式,要使用background-sizing、background-position来设置其属性。
裸奔
其实说白了,背景图片就是通过样式加载后,让页面更漂亮而已,内容图片就是为了展示给用户的。假设有一天你的网页没有任何样式的时候,那么这个时候请想想你的网站上哪些图片是给用户看的,这样就足够了。
在网页加载的过程中,以css背景图存在的图片background-image会等到结构加载完成(网页的内容全部显示以后)才开始加载,而html中的标签img是网页结构(内容)的一部分会在加载结构的过程中加载,换句话讲,网页会先加载标签img的内容,再加载背景图片background-image,如果你用引入了一个很大的图片,那么在这个图片下载完成之前,img后的内容都不会显示。而如果用css来引入同样的图片,网页结构和内容加载完成之后,才开始加载背景图片,不会影响你浏览网页内容。
此处谈到img标签是行内元素,就此谈下行内元素、块级元素。
区别:
1.行内元素与块级元素直观上的区别
行内元素会在一条直线上排列,都是同一行的,水平方向排列。
块级元素各占据一行,垂直方向排列。块级元素从新行开始结束接着一个断行。
2.块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。
3.行内元素设置宽高无效,大小由内容决定。块级元素可以设置高,独占一行。
最新文章
- Servlet和CGI的区别
- Android入门(七):Spinner下拉式菜单组件
- AX7: How to deploy a Package
- Asp.net Mvc模块化开发之分区扩展框架
- 《linux内核设计与实现》读书笔记第十八章
- 怎样把excel一列分成多列
- spring 配置触发器
- 学号20145220 《Java程序设计》第5周学习总结
- javascript-函数的参数和return语句
- ASP.NET和支付宝合作开发第三方接口的注意事项
- mysql分表方法实现
- iOS随机颜色
- 安装MongoDB x86_64
- 【干货】使用SIFT取证工作站校验文件哈希----哈希一致则文件具备完整性
- python第三次周末大作业
- mui卡片视图的制作
- pytesseract 验证码识别
- SqlDateTime 溢出。必须介于 1/1/1753 12:00:00 AM 和 12/31/9999 11:59:59 PM 之间。
- EF的学习
- linux something