zoukankan      html  css  js  c++  java
  • html使用img标签和背景图片之间的区别

    1.加载问题

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

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

    2.加载失败显示问题

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

    3.数据图与非数据图

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

    摄图网https://www.wode007.com/sites/73204.html VJ师网https://www.wode007.com/sites/73287.html

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

    1》使用img

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

    2》使用背景图

    • 不是html结构的一部分
    • 图像代替文本使用时
    • 缩短下载时间时
    • 为不同的屏幕分辨率展示不同的图像时(media查询时使用背景图)
  • 相关阅读:
    MSIL实用指南-一维数组的操作
    MSIL实用指南-给字段、属性、方法、类、程序集加Attribute
    MSIL实用指南-比较运算
    MSIL实用指南-逻辑运算
    MSIL实用指南-位运算
    MSIL实用指南-数学运算
    MSIL实用指南-创建对象
    MSIL实用指南-装箱拆箱
    MSIL实用指南-生成构造函数
    K8S从入门到放弃系列-(5)kubernetes集群之kube-apiserver部署
  • 原文地址:https://www.cnblogs.com/ypppt/p/13338042.html
Copyright © 2011-2022 走看看