网页无图再不是梦想

bet36365注册送奖金,2015/08/22 · HTML5 · 1
评论
·
网页开发

原文出处: 百码山庄   

一直以来,网页开发对优化方面做的工作从未停止。网页无图也是为了减少页面资源请求而提出的一种畅想。无可厚非在网页开发的历程中在网页无图方面我们已经取得了不朽的成就:从一开始零零碎碎的小图标资源,到后来小图标合并成一个图片出现雪碧图,再到后来Webfont的出现不仅可以取代雪碧图,而且彻底解决了图标管理难,变色实现麻烦的问题。今天我要跟大家介绍一个小工具,也是可以帮助实现网页无图这一终极目标。理论上来讲,它可以将任何一张图片转换成一个不带图片,不带背景图的干干净净的html标签。但是这有前提:你的计算机得有足够的资源去支撑。

1、CSS Sprite(雪碧图|精灵图)指什么? 有什么作用?

雪碧图是将若干的小图片、小图标整合至一张大图中。
实现方法:通过设定一个固定大小的盒子(display:block,display:block-inline“`)当做窗口,再由background-positon定位大图来展现我们所需要小图片。
好处:

  • 能够将获取图片的请求大量的减少,从而提高网页加载速度;
  • 简单的UI变换时,只需更改background-position,无需重新更换图片。

缘起

那是一个工作日的早上,我向往常一样准时到达了工作岗位上,启动电脑,打开浏览器我偶然发现了一篇名曰《18个你可能不相信是用CSS制作出来的东西》的文章,出于职业敏感,也出于好奇我就点进去看了一看,发现其中有一个很有意思的作品:http://codepen.io/HugoGiraudel/full/gpcwa/,它仅仅用一个div标签就完成了这幅作品,于是我们几个同事好奇使然,开始分析它的实现,渐渐有了下面即将介绍的工具的影子。

2、img标签和CSS背景使用图片在使用场景上有何区别?

  • CSS背景图不存在于DOM结构中,仅仅是一种以图片显式形式的样式,用户不可操作,它将在HTML加载完成后加载,加载失败后不会出现;
  • img标签存在于DOM结构中,可以实现链接、放大等等功能,用户进行可以操作,它随HTML一同加载,加载失败后以标签形式呈现;
  • 若无需频繁更改图片,推荐使用CSS背景图;反之,则为img标签。

渐入主题

既然可以使用一个标签制作出一副精美的像素图,那么是否就意味着可以用一个标签还原任一一张图片?唯一不能还原的是图片的精细度问题。然而,如果可以精细到每一个像素点,那么高精度的还原整张图也完全可行,只是这必将消耗非常多的计算机资源。这一设想便是催生这个小工具的催化剂,于是我便开始构思起来。

3、title和alt属性分别有什么作用?

  • title属性:全局属性,能运用于任何标签,是以提示形式添加的描述性文字,无论标签加载成功与否都能正常显示;
  • alt属性:alt属性只能用在img、area和input元素中,是上述标签元素加载失败后呈现在标签上的文字描述。

案例分析

通过使用开发者工具分析以上案例的源码,我发现其实它的实现并不难。我们知道在CSS3中新增了一个设置盒子阴影的box-shadow属性,而这个属性可以同时设置任意多个不同颜色和扩散度的阴影块,而案例正是完美的诠释了这个新属性。

既然如此,那么我们现在来做个试验,我们在任一一张图上覆盖上一个个大小相同的小方格子,我们就可以将任何一张图片分隔成一个个的小方格,我们只要知道这些小方格的大小、顺序和位置,我们就可以重组这张图片,如下对比图所示:

bet36365注册送奖金 1

但是,有个问题:box-shadow的引用颜色是单色的,而每个盒子范围内的图案是复杂的,我们如何去处理这个问题?

因为box-shadow只能设置颜色,所以这个问题的结果只有一个,找出一个能代表这个格子的颜色,那么选取哪一个颜色值就因人而异了,可以选格子四角的任意一个、可选中心点,可选格子内的任意一个点,我选择的是格子的左上角这个点。我们不难发现,如果我们尽可能的缩小格子,小到只剩下一个像素大小,我们就可以完整的还原一张图片了。

4、background: url(abc.png) 0 0 no-repeat;什么意思?

  • background: url(abc.png):加载当前目录下的abc.png作为背景图;
  • “`0
    0“:背景图的左上角起始点与父级元素的左上角的起始点左偏差为0,上偏差为0。即,两者重合;
  • no-repeat背景图只出现一次,不重复。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图