时间:2021-05-08
下面是一张样图:
本文的目的并不是讲CSS Sprite如何让一个网站更快,而是说一些使用CSS Sprite的时候的一些最佳实践。
不要等到你完成切片之后才开始sprite.
如果你边切图边写CSS,然后等你完成了整个网站之后再来拼接这些图片到一个Sprite中,你就不得不完全重写你的CSS,你也必须要花费很多的时间来用PS拼接大量的图片——这是件令人倍感纠结的事情。但是如果边切图边整合,就会比较容易些。
把图片放到它要显示的地方的相对的地方这个小技巧貌似比较难理解。
我直到创建一个比较大的sprite的时候才理解到这一点。比如,如果我们希望一个图片出现在一个元素的左侧:
将那个图片放到sprite图片的右边(本文开始的那个sprite图片)。这样的话,当你通过CSS移动背景图片的位置的时候,基本上不可能有其它的小图片意外的出现在它的附近。使用Sprite的时候常常遇到的一个问题是图片会出现在它不该出现的位置。
定位时避免使用bottom或right等
当使用CSS sprite的时候,只用background-position: bottom -300px或background-position: right -200px;非常容易。这刚开始的时候是可行的,但是问题是,当你在宽度上或高度上扩展相关sprite图片的时候,原先设置的位置可能是错的,因为那个图片已经不再Sprite图片的底部或右部了。使用确切的位置来避免这个问题。
给每个图片足够的空间
就像你在本文顶部的实例图片看到的那样,那些小图片都被预留了足够的空间。为什么不把他们塞到一块来让sprite图片更小呢? 因为使用这些图片的元素通常都会有大量的内容而且可能会需要扩展的间距,以至于其它图片不会意外出现。
例子:
例子中的每个条目都有个带数字的图片作为背景图片。如果你仔细看了上面的那张图片,你可以看到这三个数字图片是如何错开排列的,这样如果内容增多,其它图片就不会意外出现。
不用担心Sprite图片的像素大小
如果你的网站经过良好的设计,那么你将会有一大堆的图片来整合进到sprite里面,这样你就需要你个非常大的sprite来恰当的放置这些图片。这是很不错的。sprite里的空白不会占用太多的文件大小。addons.mozilla.org上使用的Sprite图片有1,000px×2,000 px那么大,但是图片的大小仅仅16.7kb
简单介绍一下 CSS Sprites 的优点:
当用户往U盘中拷200张图片,会等很久。但是如果弄成一个文件,再拷贝就会快很多.
CSS Sprites 的目的就是通过整合图片,减少对服务器的请求数量,从而加快页面加载速度。
实现方法:
首先将小图片整合到一张大的图片上
然后根据具体图标在大图上的位置,给背景定位。background-position:-8px -95px;
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
一、什么是雪碧图?CSS雪碧即CSSSprite,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的背
1、使用css精灵。好处是将css中使用的小图片可以合并为一张大图片减少了对服务器端的请求,服务器压力小,页面加载速度也快。2、合并多个css文件为单个css文
简单介绍下:CSS图片拼合(CSSsprites)可有效降低图片文件的HTTP连接请求数.多个图片将以一定间距合并为一个大图片文件.页面中使用这些图片的元素将利
CSSSprites背景定位技术的应用研究。在计算机图形学中,Sprites指的是包含于场景中的二维图像或者动画,最开始这项技术是应用于街机游戏中,它将多张图片
一、图片实现圆形条件 原本不是圆形图片,通过CSS样式布局实现成圆形图片,首先图片必须为正方形。 二、使用布局技术 使用CSS3圆角技术实现。 使用