对角线排列的背景图片拼合技术

问说网 · 发布于 2015-02-28 · 字数3247 · 浏览 1985 · 评论 0

在字体图标还没有广泛使用之前,我们一般都是使用的png图片,那时候为了更好的优化网页,减少网页的HTTP请求,我们将很多的图标放置在一张图片上,然后通过CSS的背景定位显示特定位置上的图标,这就是我们熟知的CSS Sprites。

这个构想是非常好的解决方法,可是在实际的使用过程中,你可能会发现,一定区域内由于显示的标签很大,会出现其他背景图上的图标,例如下面的这张图:

sprite chunks超出

我们不得不增加背景图上面,图标的间距不管是X轴还是Y轴,又得重新去计算图标的位置修改代码。

那么这个问题有没有解决方法呢,针对上面的图片出现的问题,我们可以将我们的图标水平排列,然后给以足够的距离,但是如果有很多的图标,那么这张图可能会很长很长,体积也足够大。

对角线精灵

当你在想如果排列这些图标的时候,不管是水平排列还是垂直排列,你有没有想过对角线排列呢?我找了半天也没找到任何提及一个对角线的精灵。我不知道这是否意味着这是一个新的想法,或一个坏的,没有人愿意出版。我希望是前者。

diagonal-in-action

不幸的是有一个文件大小的权衡。你增添了许多未使用的空白。一个30左右的精灵,我从组件垂直堆叠对角堆叠,只有约10%的大小增加。另外,约有60的图像,它增加了45%。10%的增长是很容易的获得利益的燕子。45%是努力一点。你的可能不一样。

sprite-diagonal

因为你没有把你的精灵部件之间的间距(我做很多的垂直和水平,允许一小部分操纵每)精灵尺寸更小。我的60个精灵图像的组件之间的空间是2142px 50px高。间隔了200px组件之间就超过8000px。使用相同的60组对角的精灵,用10px填充结束被周围1500px高和宽。据我所知,这只对Opera浏览器。我找不到对具有大尺寸问题的任何其他浏览器的信息,但希望如果你知道其他问题听取反馈。

所以,你可以在实践中看到这一点,我创建了一个简单的10分量的精灵从几个图标famfamfam丝绸图标集(见上图)。你可以查看示例页显示50px,200px和对角间隔的精灵。的filesizes和尺寸了:50px–×610 5723字节16,200px–×1960 5967字节16,对角线–×250 6554字节250。

制作对角线精灵

当我正常的垂直堆叠的精灵我用精彩的在线工具CSS Sprite Generator。我注意到,后端是开放源代码的grabbed a copy

在获得所需部件安装在我的本地机器后(后疼痛明显,后期),我调整他们的代码在一个对角线的精灵输出。目前的代码是快速和肮脏的种因为我不知道是去工作。如果有兴趣,我就可以,请让我知道在下面的评论中,我就可以把它清理和释放。

最后我认为这是问题,我碰到一个不错的解决方案。它可能不适合每一个人,文件大小增加是值得考虑的,但它是在后面的口袋里一个有趣的选择。我想听听你的意见对这个解决方案。

译文:http://www.aaronbarker.net/2010/07/diagonal-sprites/

本文系作者 问说网 授权问说网发表,并经问说网编辑,转载请注明出处和 本文链接

相关文章

  • 2015-08-14移动端网页判断手指触摸滑动的方向
  • 2016-01-18ZeroRPC基于ZeroMQ的高性能分布式RPC框架
  • 2016-01-24JsMvc代码简易而功能强大的面向对象库
  • 2016-05-13使用HTML5中的Canvas绘图
  • 2016-06-04详解CSS3中的属性选择器
  • 2016-07-02jQuery Scroll Path按路径元素滚动动画插件
  • 2016-07-04Timelinr简单的时间线jQuery插件
  • 2016-07-05angularAMD使用RequireJS和AngularJS快速构建WebApp
  • 发布评论

    为您推荐


    Warning: file_exists(): open_basedir restriction in effect. File(../uedsc/wp-content/uploads/post-thumbnail/36874_0_thumbnail.jpg) is not within the allowed path(s): (/home/wwwroot/uedsc.com/:/tmp/:/proc/) in /home/wwwroot/uedsc.com/wp-content/themes/mwst/loop.php on line 15

    Warning: file_exists(): open_basedir restriction in effect. File(../uedsc/wp-content/uploads/post-thumbnail/36874_1_thumbnail.jpg) is not within the allowed path(s): (/home/wwwroot/uedsc.com/:/tmp/:/proc/) in /home/wwwroot/uedsc.com/wp-content/themes/mwst/loop.php on line 15

    Warning: file_exists(): open_basedir restriction in effect. File(../uedsc/wp-content/uploads/post-thumbnail/36874_2_thumbnail.jpg) is not within the allowed path(s): (/home/wwwroot/uedsc.com/:/tmp/:/proc/) in /home/wwwroot/uedsc.com/wp-content/themes/mwst/loop.php on line 15

    Warning: file_exists(): open_basedir restriction in effect. File(../uedsc/wp-content/uploads/post-thumbnail/36874_3_thumbnail.jpg) is not within the allowed path(s): (/home/wwwroot/uedsc.com/:/tmp/:/proc/) in /home/wwwroot/uedsc.com/wp-content/themes/mwst/loop.php on line 15

    太棒了!手把手教你用PS画一只逼真的眼睛

    人类的眼睛结构和组成构造都是相似的:椭圆结构、两边尖削,有眼睑、眼睫和眉毛。很容易就能画出一只易辨认的眼睛,今天CYHD和大家一起来学习如何画出逼真的眼睛吧~

    • 太棒了!手把手教你用PS画一只逼真的眼睛
    • 太棒了!手把手教你用PS画一只逼真的眼睛
    • 太棒了!手把手教你用PS画一只逼真的眼睛
    • 太棒了!手把手教你用PS画一只逼真的眼睛
    莫荻 · 发布于 2016-05-14 · 浏览 1159 · 评论 0

    Warning: file_exists(): open_basedir restriction in effect. File(../uedsc/wp-content/uploads/post-thumbnail/36952_0_thumbnail.jpg) is not within the allowed path(s): (/home/wwwroot/uedsc.com/:/tmp/:/proc/) in /home/wwwroot/uedsc.com/wp-content/themes/mwst/loop.php on line 15

    Warning: file_exists(): open_basedir restriction in effect. File(../uedsc/wp-content/uploads/post-thumbnail/36952_1_thumbnail.jpg) is not within the allowed path(s): (/home/wwwroot/uedsc.com/:/tmp/:/proc/) in /home/wwwroot/uedsc.com/wp-content/themes/mwst/loop.php on line 15

    Warning: file_exists(): open_basedir restriction in effect. File(../uedsc/wp-content/uploads/post-thumbnail/36952_2_thumbnail.jpg) is not within the allowed path(s): (/home/wwwroot/uedsc.com/:/tmp/:/proc/) in /home/wwwroot/uedsc.com/wp-content/themes/mwst/loop.php on line 15

    Warning: file_exists(): open_basedir restriction in effect. File(../uedsc/wp-content/uploads/post-thumbnail/36952_3_thumbnail.jpg) is not within the allowed path(s): (/home/wwwroot/uedsc.com/:/tmp/:/proc/) in /home/wwwroot/uedsc.com/wp-content/themes/mwst/loop.php on line 15

    设计师必读!玩转DRIBBBLE的终极指南

    只要你是设计师,你就肯定知道Dribbble。这是一个供设计师展示作品、同行交流、寻找灵感的场所。Dribbble是一个很有趣的平台。很多人在这里追逐热情和梦想…

    • 设计师必读!玩转DRIBBBLE的终极指南
    • 设计师必读!玩转DRIBBBLE的终极指南
    • 设计师必读!玩转DRIBBBLE的终极指南
    • 设计师必读!玩转DRIBBBLE的终极指南
    AmeliaFranklin · 发布于 2016-05-16 · 浏览 1267 · 评论 0
    Vincent · 发布于 2016-07-06

    Java接口和抽象类

    抽象类 抽象类中的方法既可以有抽象方法,也可以有非抽象方法,可以全部都是抽象方法,也可以全部都是非抽象方法 抽象方法只能出现在抽象类或接口中,不能出现在非抽象类…

    问说网 · 发布于 2016-07-12

    phpStudy让天下没有难配的PHP环境

    该程序包集成最新的Apache+PHP+MySQL+phpMyAdmin+Zend Loader,一次性安装,无须配置即可使用,是非常方便、好用的PHP调试环境…

    你应该知道的浮点数基础知识
    问说网 · 发布于 2016-08-10

    你应该知道的浮点数基础知识

    现在让我们复习大学计算机基础课程。如果你熟练掌握了浮点数向二进制表达式转换的方法,那么你可以跳过这节。 我们先来看下浮点数二进制表达的三个组成部分。

    问说网 · 发布于 2016-07-22

    MySQL入门书籍和方法分享

    MySQL可以说是使用者最多的关系数据库,开源免费优秀的访问性能,不过MySQL却不是那么简单的好用,这篇文章整理了写关于MySQL的入门书籍和方法,分享给大家…

    问说网 · 发布于 2016-07-15

    全局唯一GUID生成方案对比分析

    全局唯一标识符是一种由算法生成的二进制长度为128位的数字标识符。GUID主要用于在拥有多个节点、多台计算机的网络或系统中。在理想情况下,任何计算机和计算机集群…


    Warning: file_exists(): open_basedir restriction in effect. File(../uedsc/wp-content/uploads/post-thumbnail/155269_0_thumbnail.jpg) is not within the allowed path(s): (/home/wwwroot/uedsc.com/:/tmp/:/proc/) in /home/wwwroot/uedsc.com/wp-content/themes/mwst/loop.php on line 15

    Warning: file_exists(): open_basedir restriction in effect. File(../uedsc/wp-content/uploads/post-thumbnail/155269_1_thumbnail.jpg) is not within the allowed path(s): (/home/wwwroot/uedsc.com/:/tmp/:/proc/) in /home/wwwroot/uedsc.com/wp-content/themes/mwst/loop.php on line 15

    Warning: file_exists(): open_basedir restriction in effect. File(../uedsc/wp-content/uploads/post-thumbnail/155269_2_thumbnail.jpg) is not within the allowed path(s): (/home/wwwroot/uedsc.com/:/tmp/:/proc/) in /home/wwwroot/uedsc.com/wp-content/themes/mwst/loop.php on line 15

    Warning: file_exists(): open_basedir restriction in effect. File(../uedsc/wp-content/uploads/post-thumbnail/155269_3_thumbnail.jpg) is not within the allowed path(s): (/home/wwwroot/uedsc.com/:/tmp/:/proc/) in /home/wwwroot/uedsc.com/wp-content/themes/mwst/loop.php on line 15

    为你的博客添加注册Google广告支持

    首先,通过 google adsense 注册链接进行注册。注册过程比较简单,通过鼠标点击和一些个人信息输入就可以完成。具体几个关键步骤可以看下面的截图。

    • 为你的博客添加注册Google广告支持
    • 为你的博客添加注册Google广告支持
    • 为你的博客添加注册Google广告支持
    • 为你的博客添加注册Google广告支持
    问说网 · 发布于 2016-07-15 · 浏览 1224 · 评论 0

    问说网手机版

    躺着 站着 跪着轻松访问

    更多详情 关于作者

    问说网

    问说网分享与设计有关的文章素材界面和作品,提供设计教程、素材分享、界面欣赏、编程设计、设计书籍、设计师导航等内容,你可以在这里阅读、学习、分享、交流。

    13172 文章
    497 评论
    2107 人气

    更多 热门话题

    APP界面

    关注 APP界面

    文章 41506 · 浏览 3468

    APP欣赏

    关注 APP欣赏

    文章 41427 · 浏览 3196

    APP手机界面

    关注 APP手机界面

    文章 41417 · 浏览 3361

    图片素材

    关注 图片素材

    文章 29463 · 浏览 2720

    高清图片

    关注 高清图片

    文章 26530 · 浏览 2945

    更多 推荐作者

    关注 惢碎葬爱

    文章 96 · 评论 0

    关注 怎麽继续

    文章 90 · 评论 2

    关注 倾听寂寞

    文章 83 · 评论 0

    关注 莪很迷茫

    文章 97 · 评论 0

    关注 流浪的脚步

    文章 86 · 评论 0

    关注 籹孒不认输

    文章 94 · 评论 0

    
    顶部 反馈 评论 底部

    意见反馈

    感谢您对问说网的支持,提出您在使用过程中遇到的问题或宝贵建议,您的反馈对我们产品的完善有很大帮助。

    您的反馈我们已收到!

    感谢您提供的宝贵意见,我们会在1-2个工作日,通过您留下的联系方式将处理结果反馈给您!