您好,欢迎来到网站推广优化网站,我们竭诚为你服务!

百度推广、网站SEO优化排名公司

提供网站SEO排名优化推广教程方案

小型优化方法之 css sprite

作者:jcmp

浏览量: 0

2021-03-23

css sprite,中文名称为 css

css sprite,中文名称为 css精灵,是一种通过减少web应用上HTTP请求的优化方式。再次不谈原理内部怎么实现,就看简单的应用。

举个栗子,当你打开一个网站的时候,页面上会有各种小型的图标。以我前几天做的一个代码管理系统为例,这个系统上面有这些小图:

图片较小而且零碎。所以我就把它们用ps合并成了一张图(当时做的比较精细,现在就做个范例),如下:

制作这个合并图的时候,尽量减小图片的大小,例如长宽。

制作好之后,就要开始用在网页上。

原先没有合并之前,在页面中引入图片,使用img标签的src属性。如最上面的图,起码要5、6个img标签才能全部引用(本地代码)。像这样:

但是现在合并为一张图之后,img标签就不需要了,改成使用background-image:url();的形式。css如下。

这个的重点在于:

1. 你要知道原先小图的尺寸。

2. 在制作合并图的时候,小图在合并图的什么位置要知道,因为在background-position属性中要进行定位 。(background-position的值可以是百分比,可以是px,也可以是”left center“这种形式。)有 时候制作合并图需要非常精确的位置,所以这是个精细活 。

补充:

上面的制作太粗糙了。有时候会把图做成一整行,或者一竖行,或者一个正方形。这样有什么区别呢?

横和竖的好处和坏处是一样的,可以写死 background-position x|y 的其中一个值为 0,只需度量高度或宽度一维,挪动position的方式不一样吧,直接切换看不出来,都一样,如果缓慢的话看交互有关。坏处是,图片的另一个维度的大小,以最大的那张图为准,有可能浪费很多空间。方形,可以尽可能减少空间浪费,但要度量两个坐标。背景图 sprite 动画宜做成一维规划,css3-animation 里的 step 函数可以很容易的设置,比如一行50张图的动画,设置 0 100% 后,step(50) 即可。它的意思是,在规定时间内分 50 步走完  0 ~ 100% 的变化范围,每一步移动 1/50 的长度,恰好递进到下一张图,如此循环。

上文如有错漏,请指出并批评。`·

进入了解更多关于seo公司的信息。