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

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

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

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

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

关闭

前端图片懒加载的实现,采用Lazy Load 图片延迟加载提高用户体验

对于图片过多的页面,为了加速页面加载速度,所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载, 等到滚动到可视区域后再去加载。这样子对于页面加载性能上会有很大的提升,也提高了用户体验。

css实现不定宽高的图片img居中裁剪_类似微信朋友圈图片效果

前端需要显示矩形的缩略图,接口返回的图片尺寸大小不一,宽高不相等,需要前端来处理并显示成正方形,类似微信朋友圈图片的效果。那么使用纯css该如何实现不定宽高的图片居中裁剪呢?

vue中对于图片是否正常加载的思考

由于业务需要,我们需要判断图片能否正常的加载,如果未正常加载的话,需要显示一张默认图片;html会优先解析img元素会被创建,而此时imgurl还在请求中值不存在,此时就会触发onerror事件,如果加v-if,html不会解析img标签

使用html2canvas将页面转成图

之前在网上找到一个用 <a> 的 download属性下载的方法,确实很简单也很方便,但此方法不支持IE,无奈又找到另一方法。使用html2canvas将页面转成图,用canvas2image下载

根据图片url链接判断图片大小

背景:产品需求,input框输入图片链接,点击检测按钮的时候需要判断该图片不超过2M

CSS如何将图像转换为模糊图像?

在CSS中,可以使用filter属性来模糊处理图像;filter属性用于将图像转换为模糊图像。该属性主要用于设置图像的视觉效果。blur():给图像设置高斯模糊,值越大越模糊。

vue中使用带隐藏文本信息的图片、图片水印

通过RGB 分量值的小量变动,不影响对图片的识别。因此,我们可以在图片加入文字信息。最终达到如下效果:

html2canvas 生成的图片变模糊解决方案

背景图片和二维码还有用户微信头像生成一张图片,可供用户下载。打开页面的时候就是一张图可以保存,html2canvas插件即可实现效果,效果是实现了,但是很郁闷,图片模糊了。。。。

web前端图片加载优化,从图片模糊到清晰的实现过程

在网页图片显示的时候,会发现许多网站采用了先模糊,然后在慢慢清晰的过程,这样的加载用户体验是比较好的,那么如何实现呐?默认加载2张图片,一张缩略图,一张原图,当打开网页的时候默认只显示缩略图

nodejs如何下载图片?

nodejs可以使用request依赖包来下载图片。需要先安装request依赖,然后使用request向网页发出请求,最后将图片下载到本地。request模块让http请求变的更加简单。(作为客户端,去请求、抓取另一个网站的信息)

点击更多...

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