精灵图（雪碧图）的用法

最新推荐文章于 2024-08-21 12:30:00 发布

小破孩jackson

最新推荐文章于 2024-08-21 12:30:00 发布

阅读量1.8k

点赞数

分类专栏： css 文章标签：精灵图雪碧图

本文链接：https://blog.csdn.net/Jackson_ji/article/details/80511604

版权

css 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

之前一听到别人说，雪碧图（精灵图）感觉这逼格很高啊，之后，自己看了看，做个demo

用雪碧图之后，优点还是有的，减少了浏览器对服务器的请求，提高了加载的速度，也易于后期的修改，维护

.box1, .box2, .box3, .box4,.box5, .box6, .box7, .box8,.box9 {
float: left;
width:100px;
height: 100px;
background: #666 url(18.png) no-repeat;
margin-left: 10px;
}

.box1{background-position: -300px 0;position:absolute; top:200px;}
.box2{background-position: -200px 0;}
.box3{background-position: -100px 0;}
.box4{background-position:top left;}
.box5{background-position: 0 -100px;}
.box6{background-position: 0 -200px;}
.box7{background-position:bottom left;}
.box8{background-position:-300px -200px;}
.box9{background-position:bottom right;}

    </style>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
    <div class="box6"></div>
    <div class="box7"></div>
    <div class="box8"></div>
    <div class="box9"></div>

   <!--  优点：1.减少web浏览器对服务器发出请求的次数，加快下载速度。
      2.把按钮，图标，图形集合在一起可以提高可维护性。 -->