精灵图

最新推荐文章于 2024-07-20 11:07:04 发布

hello~bye~

最新推荐文章于 2024-07-20 11:07:04 发布

阅读量167

点赞数

分类专栏：前端（HTML、css）文章标签：精灵图的显示

本文链接：https://blog.csdn.net/qq_36654309/article/details/81075699

版权

前端（HTML、css）专栏收录该内容

16 篇文章 0 订阅

订阅专栏

把多个小图标放在一张图片上，减少浏览器加载图片的时间，通过代码控制显示哪一个小图标

精灵图

       方法一：
       <head>
       <meta charset="UTF-8">
       <title></title>
       <style>
           .box{
               width: 25px;
               height: 25px;
               background-image: url(img/20160404213159853.jpg);
               background-position: -40px -75px;
           }
       </style>
       </head>
       <body>
           <div class="box"></div>
       </body>
       方法二：
       <!DOCTYPE html>
       <html>
            <head>
           <meta charset="utf-8">
                <style>
                    .tree-default{
                        width:32px;
                        height:32px;
                   }

                    .tree-file{
                        background: url("images/tree_icons_32px.png") -100px -68px no-repeat;
                   }

                    .tree-folder{
                       background: url("images/tree_icons_32px.png") -260px -4px no-repeat;
                    }

                </style>
           </head>
           <body>
                <div class="tree-default tree-file"></div>
                <div class="tree-default tree-folder"></div>
           </body>
       </html>

hello~bye~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
精灵图

把多个小图标放在一张图片上，减少浏览器加载图片的时间，通过代码控制显示哪一个小图标方法一： &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; .box{ ...
复制链接

扫一扫

专栏目录