精灵图的制作和使用

最新推荐文章于 2024-05-16 17:48:19 发布

捞起月亮的渔民~

最新推荐文章于 2024-05-16 17:48:19 发布

阅读量2.5k

点赞数 1

文章标签： css3

本文链接：https://blog.csdn.net/qq_52622178/article/details/115364935

版权

精灵图的制作和使用

认识css精灵：
css精灵（也称CSS Sprites）是一种处理网页背景图像的方式。通常情况下，由很多小的背景图像合成的大图称为精灵图。

【精灵图的制作】
利用ps制作精灵图步骤

在ps上新建一个画布
点击移动工具，将图片往新建的画布里面拖
全部完成之后，将这个小图层全部合并，最后以png格式导出，即精灵图制作完毕

【精灵图的使用】
实例图片（图片转载）
利用ps找到具体位置
代码如下

 <style>
        .box1{
            float: left;
            width: 120px;
            height: 110px;
            background:url("dd.png");
            background-position: -454px -667px;
        }
        .box2{
            float: left;
            width: 120px;
            height: 110px;
            background:url("dd.png");
            background-position: -454px -667px;
        }
        .box3{
            float: left;
            width: 120px;
            height: 120px;
            background:url("dd.png");
            background-position: -435px -20px;
        }
        .box4{
            float: left;
            width: 120px;
            height: 120px;
            background:url("dd.png");
            background-position: -319px -519px;
        }
    </style>
<body>
    <div class="box1"></div>
    <div class="box2"> </div>
    <div class="box3"> </div>
    <div class="box4"> </div>
</body>

6.运行结果如下
在这里插入图片描述
【注意】
1.css精灵图的关键在于使用background-position属性来定义背景图像的位置。
2.网页的左上角为坐标原点值，背景图片上移时，Y坐标为负值，图像左移时，X坐标为负值。
3.CSS精灵图虽然可以加快网页的加载速度，但也存在一定的劣势，如果页面背景有少许的改动，就需要修改精灵图和CSS样式。

捞起月亮的渔民~

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
精灵图的制作和使用

精灵图的制作和使用认识css精灵：css精灵（也称CSS Sprites）是一种处理网页背景图像的方式。通常情况下，由很多小的背景图像合成的大图称为精灵图。【精灵图的制作】利用ps制作精灵图步骤在ps上新建一个画布点击移动工具，将图片往新建的画布里面拖全部完成之后，将这个小图层全部合并，最后以png格式导出，即精灵图制作完毕【精灵图的使用】实例图片（图片转载）—利用ps找到具体位置代码如下 <style> .box1{
复制链接

扫一扫