|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
表现和内容相分离。将设计部分剥离出来放在一个独立样式文件中,你可以减少未来网页无效的可能。
网页制造poluoluo文章简介:本文的目标并非讲CSSSprite怎样让一个网站更快,而是说一些利用CSSSprite的时分的一些最好理论。
尽人皆知,削减网站加载工夫的最无效的体例之一就是削减网站的HTTP哀求数。完成这一方针的一个无效的办法就是经由过程CSSSprites——将多个图片整合到一个图片中,然后再用CSS来定位。
上面是一张样图:
本文的目标并非讲CSSSprite怎样让一个网站更快,而是说一些利用CSSSprite的时分的一些最好理论。
不要比及你完成切片以后才入手下手sprite.
假如你边切图边写CSS,然后等你完成了全部网站以后再来拼接这些图片到一个Sprite中,你就不能不完整重写你的CSS,你也必需要消费良多的工夫来用PS拼接大批的图片——这是件使人倍感纠结的事变。可是假如边切图边整合,就会对照简单些。
把图片放到它要显现的中央的绝对的中央
这个小技能貌似对照难了解。我直到创立一个对照年夜的sprite的时分才了解到这一点。好比,假如我们但愿一个图片呈现在一个元素的左边:
将谁人图片放到sprite图片的右侧(本文入手下手的谁人sprite图片)。如许的话,当你经由过程CSS挪动背景图片的地位的时分,基础上不成能有别的的小图片不测的呈现在它的四周。利用Sprite的时分经常碰到的一个成绩是图片会呈现在它不应呈现的地位。
定位时制止利用bottom或right等
当利用CSSsprite的时分,只用background-position:bottom-300px或background-position:right-200px;十分简单。这刚入手下手的时分是可行的,可是成绩是,当你在宽度上或高度上扩大相干sprite图片的时分,本来设置的地位多是错的,由于谁人图片已不再Sprite图片的底部或右部了。利用切实的地位来制止这个成绩。
给每一个图片充足的空间
就像你在本文顶部的实例图片看到的那样,那些小图片都被预留了充足的空间。为何不把他们塞到一块来让sprite图片更小呢?由于利用这些图片的元素一般城市有大批的内容并且大概会必要扩大的间距,以致于别的图片不会心外呈现。
例子:
例子中的每一个条目都有个带数字的图片作为背景图片。假如你细心看了下面的那张图片,你能够看到这三个数字图片是怎样错开分列的,如许假如内容增加,别的图片就不会心外呈现。
不必忧虑Sprite图片的像素巨细
假如你的网站经由优秀的计划,那末你将会有一年夜堆的图片来整合进到sprite内里,如许你就必要你个十分年夜的sprite来得当的安排这些图片。这是很不错的。sprite里的空缺不会占用太多的文件巨细。addons.mozilla.org上利用的Sprite图片有1,000px |
|