`

CSS背景图与html插入img的区别

    博客分类:
  • web
 
阅读更多
           1、css中的图片以背景图形式存在,写在html中的图片以标签形式的存在。而在网页加载过程中,以css背景存在的图片会等到html结构加载完成才开始加载,而html中的img标签是网页结构(内容)的一部分会在加载结构的过程中加载。
           在一个单纯由html和css组成的页面中,背景图片总是最后加载的,那么假如我们想要使用较小的背景图片作为占位符,用于在家在较大的图片或者flash文件时给用户以提示,大部分时候恐怕是达不到效果的,因为背景图片有时候甚至会在大图片或flash文件加载完成之后才会被加载。
           2、通常非内容的图片(即用来修饰页面的元素)就写在css里,如果是内容性的图片就写在html中,比如,你要做一个漂亮相框的相册,那么修饰边框的图片就写在css里,相框里的内容照片就在html里。
           3、图片作为背景,在图片没有加载或者加载失败时,不会有个图片的占位标记,不会出现红叉。
分享到:
评论

相关推荐

    postcss-auto-imgmq:自动插入媒体查询图像

    postcss-auto-imgmq 根据图片名或图片路径自动添加媒体查询到样式表 常见场景 retina屏高清图片自动适配 根据屏幕尺寸替换背景图片 其他媒体查询条件相关图片样式自动生成 如何使用 1.从npm安装 npm install -D post...

    css入门笔记

    将背景图等比放大,直到背景图完全覆盖到元素的所有区域为止 4.contain 将背景图等比放大;直到背景图片碰到某个边缘位置 5.背景图片固定 作用:将普片固定在网页在某个位置,一直在可视区域内,不会随着 ...

    html静态页面工商局信息

    制作一个静态网页,有三种风格,实现一键切换风格。字体:黑体 960px*130px 。 <style type="text/css"> img{ position:absolute; left:150px; top:-20px;... <img src="背景1.png" /> <body>

    AJAX基础概念、核心技术与典型案例(内涵动态实例)

    /img 系统使用的图片文件夹 第22章(/ch22) 程序描述:本章将利用开源框架Prototype,讲述如何在网页中实现Windows关机效果,使读者对Prototype框架有进一步的认识。 /lightbox.html 仿Window关机...

    xheditor-1.1.14

    建议直接设置textarea的css背景 备注:v1.1.1新添加 loadCSS:加载样式 参数值:URL地址、URL数组以及直接内部样式,例如:'1.css'、['1.css','2.css']、'<style>body{font-size:20px;}</style>' ...

    lazy-loading-responsive-images:WordPress插件,用于延迟加载图像。 适用于自适应图像并使用lazysizes

    延迟加载(无需任何手动修改): 通过img或图片插入的picture ,帖子,页面,自定义帖子类型,文本小部件等发布缩略图。 内联背景图像。 或通过处理完整标记的选项,标记中的所有图像和其他启用的媒体(未排除或...

    70款经典Dreamweaver插件

    alternate_table_rows 使表格中行与行之间的背景色交替变换 print 支持三种打印页面连接,文字连接、图片连接 preloaddisplay 预先加载页面,如果你的网站下载的速度比较慢,用这个比较好。 swftext 将Drm和Flash...

    Dreamweaver 插件集

    使表格中行与行之间的背景色交替变换 print 支持三种打印页面连接,文字连接、图片连接 preloaddisplay 预先加载页面,如果你的网站下载的速度比较慢,用这个比较好。 swftext 将Drm和Flash结合起来了,选择文本,...

    功能非常全面的一个论坛源码

    - 图片允许批定高度和宽度,格式为[IMG=边框粗细,排版方式,高度,宽度] - 允许单独指定文字的背景色,格式为[BGCOLOR=颜色]文字 221. 对来访用户浏览器及系统使用信息作了更新,现在将更准确 222. 预览帖子不需要...

    jQuery详细教程

    提示:jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。在本教程接下来的章节,您将学习到更多有关选择器的语法。 文档就绪函数 您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready ...

    ozh-tweet-archive-theme:Twitter存档的WordPress主题(与插件Ozh'Tweet存档器一起使用)

    Ozh'Tweet存档主题这是一个WordPress主题,旨在... 编辑style.css和/或将图像上传到wp-content / themes / ozh-tweet-archive-theme-master / img /。 关键图像是new-profile.jpg(您的头像)和1500x500.png(背景)。

    快递窝快递查询程序 v2.8(php版).rar

    logo图片位于img/kuaidiwo.png,采用的是背景调用,请根据自己爱好修改。 =================================   如何增加快递公司查询项? 比如我想增加一个圆通快递的查询,请按如下步骤进行(只是举例 请根据...

    DotNetTextBox所见即所得编辑器控件 v3.3.1

    4) 新增按键形式的控件状态栏,可通过toolbar.css样式文件控制其外观,并且按键形式的状态栏为默认状态栏,可通过新增的ImageStatusBar属性设置为True来换回以前图像形式的状态栏。 5) 将粘贴功能区分为粘贴...

    WEB设计大全

    颜色、图像及背景 <br>11.1 颜色基础 <br>11.2 Web上的颜色 <br>11.2.1 比特深度 <br>11.2.2 在Web上定义颜色 <br>11.2.3 浏览器安全颜色 <br>11.2.4 混合色 <br>11.2.5 HTML和颜色 ...

    WEB设计大全(part2)

    颜色、图像及背景 <br>11.1 颜色基础 <br>11.2 Web上的颜色 <br>11.2.1 比特深度 <br>11.2.2 在Web上定义颜色 <br>11.2.3 浏览器安全颜色 <br>11.2.4 混合色 <br>11.2.5 HTML和颜色 ...

    js使用小技巧

    透明背景 <IFRAME src="1.htm" width=300 height=180 allowtransparency></iframe> 获得style内容 obj.style.cssText HTML标签 document.documentElement.innerHTML 第一个style标签 document.styleSheets...

Global site tag (gtag.js) - Google Analytics