zoukankan      html  css  js  c++  java
  • 精灵图技术

    在加载图片时,每加载一次,就向网络中发送一次请求
    icon为小图标,同样需要向网络发送请求
    为了节省网络资源,将页面中需要用到的icon集成到一张图中,使用时,只需发送一次请求即可
    在css文件中使用时,只需要使用到icon在整张图中的相对位置即可,使用background-position:;是icon显示出来
        <body>
            <div class="icon icon-1"></div>
            <div class="icon icon-2"></div>
        </body>
    .icon{
        background-color: #ccc;
        /*将精灵图设为背景图片*/
        /*背景透明的图片后缀为png*/
        background-image: url(../img/index.png);
        /*设置背景图片不平铺*/
        background-repeat: no-repeat;
        
    }
    .icon-1{
         600px;
        height: 600px;
        /*图片在容器中的位置*/
        /*背景居中*/
        background-position: center;
    }
    .icon-2{
        /*icon大小*/
         55px;
        height: 55px;
        background-position: -187px 0px;
    }
  • 相关阅读:
    第一周作业
    C语言I博客作业08
    十四周助教总结
    十三周助教总结
    C语言I博客作业07
    C语言II博客作业01
    学期总结
    C语言I博客作业08(未完成)
    C语言I博客作业07
    C语言I博客作业06
  • 原文地址:https://www.cnblogs.com/roxy/p/7395088.html
Copyright © 2011-2022 走看看