关闭

html使用img标签和背景图片之间的区别

时间: 2018-11-23阅读: 4924标签: 图片

1.加载问题

背景图片会等到html结构加载完成才开始加载img标签是网页结构的一部分,会在html结构加载的时候加载在网页加载的过程中,背景图片会等到结构加载完成(网页的内容全部显示以后)才开始加载,而img标签是网页结构(内容)的一部分会在html结构加载的过程中加载,换句话讲,网页会先加载img标签的内容,

再加载背景图片,如果你用引入了一个很大的图片,那么在这个图片下载完成之前,img后的内容都不会显示。而如果用css来引入同样的图片,网页结构和内容加载完成之后,才开始加载背景图片,不会影响你浏览网页内容。(即,img是内容性的,背景图是修饰性的)


2.加载失败显示问题

背景图片在加载失败或路径找不到时,不会显示图片标记,img标签在加载失败或找不到路径时,会显示一个撕裂的小图标标记


3.数据图与非数据

所谓数据图就是从后台获取的图片,一般就用img标签显示,其他的图片一般就作为背景图展示


4.何时用img,何时用背景图

1》使用img

  • 作为html结构内容的一部分
  • 展示从后台传过来的数据
  • 对图片进行缩放操作
  • 利于搜索引擎搜索时

2》使用背景图

  • 不是html结构的一部分
  • 图像代替文本使用时
  • 缩短下载时间时
  • 为不同的屏幕分辨率展示不同的图像时(media查询时使用背景图)

 

相关资料:https://my.oschina.net/u/3680343/blog/1604073
作者:smile.轉角


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/1396

Js实现下载图片

服务器接口返回一个图片的远程地址,要求前端进行下载,前端接口拿到图片通过canvas转成base64的格式,然后利用A标签的download属性 进行下载,具体请看代码

图片上传获取宽高的方法

最近,我负责的后台系统有一个图片上传校验图片比例的需求,以前没有做过这种需求,便查了一些资料总结了一下图片上传获取宽高的方法。想要获取图片的宽高首先要知道图片的url

谈谈 Web 图片浏览体验与优化

图片,在一张网页上起到了相当大的作用。一个充满艺术的网站,它们的排版往往十分简洁、大方,整张网页的美感全体现在了一张背景图和产品图=== 而在浏览这样的网页时,其响应速度决定了用户体验。如果你正在打开一个自己比较感兴趣的网站

使用 AVIF 图片格式

众所周知,一图胜千言,图片对于视觉的冲击效果远大于文字。但对于我们的互联网而言,传输与解析一张图片的代价要远比千言大的多的多(目前上亿像素已经成为主流)。

Js怎么给图片打马赛克?

JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

图片懒加载及异常处理

在日常页面开发中,常常会涉及到图片的展示。有时候当图片资源过多时,我们希望能将图片延迟加载,同时当图片加载失败后,能用一张默认图片去代替其进行展示

PNG图片在IE6中背景不透明怎么解决?

Internet Explorer中提供了提供了独有的滤镜效果,他通过filter:progid:DXImageTransform.Microsoft.AlphaImageLoader实现。

js处理img标签加载图片失败,显示默认图片

如果已经引入了jquery插件,就很好办。没有的话,如果实在需要,可以附上代码,如果img标签是少量的话,可以用这个 img的onerror事件:

css实现图片剪裁居中_利用css属性object-fit

列表显示图片的时候,一般设置图片宽度自适应,那么高度就会根据图片本身的宽高比等比缩放,怎么才能实现图片居中剪切,避免图片变形呢,css属性object-fit就可以实现

js实现图片局部放大效果

图片局部放大效果结合的知识点主要是DOM的操作,以及事件的应用,所以首先要对DOM的操作有一定了解,其次能对事件的应用有一定的累积。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!