css精灵，又叫css背景精灵

最新推荐文章于 2024-05-23 16:05:38 发布

卡夫卡的baby

最新推荐文章于 2024-05-23 16:05:38 发布

阅读量583

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/weixin_72303943/article/details/125754478

版权

CSS精灵，又称CSS背景精灵，是一种将多个小图标合并到一张大图中，通过CSS背景定位显示所需图像的技术，旨在减少HTTP请求，提高网页加载速度。文章介绍了如何使用Fireworks进行精确控制精灵，并给出了实例代码。

摘要由CSDN通过智能技术生成

css精灵，又叫css背景精灵

“css精灵”，英语css sprite，所以也叫做“css雪碧”技术。是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。

css精灵有什么优点，就是减少了http请求。比如4张小图片，原本需要4个http请求。但是用了css精灵，小图片变为了一张图，http请求只有1个了。

用fireworks精确控制精灵:

例如：我们要显示“爱逛街”这个小图。

(1) 先在原图（淘宝网的精灵图），用切片，框选出你要显示图的大小（你用切片框选出矩形的宽度和高度，等价于你再页面中给盒子设置width和height）。

(2) 我们使用fireworks中的切片绘制矩形。用矩形的宽度和高度，表示当前小图向左移动量和向上移动量。

代码如下：

<title>css精灵，又叫css背景精灵。</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{

关注

专栏目录