一、精灵技术需求
在浏览器中输入网址 , 向服务器发送请求显示某个网页 ,
服务器接受请求 , 将网页数据传递给浏览器 ;
用户访问网站时 , 网页中每张图片都要经过单独请求 , 服务器一次只能传递一张图片给用户浏览器..., 需要向左移动 157 像素 , 向上移动 107 像素 ;
因此 background-position 属性设置为 -157px, -107px 即可 ;
三、CSS 精灵技术代码示例
----...勾选出一个大概轮廓 ,
然后使用 指针工具 或者 部分选定工具
, 在放大后的界面中微调 ;
最终得到 " 下载游戏 " 按钮的位置和大小 , 该按钮 位置在图片中的 0 , 219 坐标 , 该按钮大小...236 x 128 像素 ;
按钮的大小是 236 x 128 像素 , 因此这里为盒子模型也设置 236 x 128 像素尺寸 ;
按钮图片在精灵图片中的位置是 0, 219 像素 , 这是图片的左上角位置...;
为盒子模型设置该精灵图片后 , 默认显示的位置是 0, 0 像素 , 也就是左上角的位置 ;
这里就需要将 0, 219 位置的按钮显示到 0, 0 位置 , 将图片向左移动 0 像素 , 向上移动