CSS sprites简单实例

    科技2025-07-08  8

    目录

    文献1:

    附件1

    附件2

    附件3

    文献2:

    参考文献


    文献1:

    关于雪碧图(css sprites)网上已经有非常详细的介绍,比如百度百科,最简单的来说,CSS sprite即把网页中比较小的一些小图片整合到一张图片文件中,再利用CSS的background-image属性插入图片,然后利用background-position属性对图片所需要的部分进行精确定位,从而达到减少服务器请求次数的目的。

    这里主要使用雪碧图实现一个最简单的小图标导航展示。具体代码可以见附件1,素材详见附件2,效果图详见附件3。

    本例使用内部样式的方式对整个文档格式化处理,最核心的部分采用无序列表的方式完成对导航条目的排版。内部样式中:#mainbody{}部分即对主体部分完成初试化工作,接下来清除CSS中ul的默认属性,然后对列表中的每一行li完成初始化工作,其次对h3格式进行重置,满足自身需要,使用text-indent属性让文字缩进,以便于腾出置放图标的空间,最后便是关于CSS sprites中最核心的部分:

    background: url(00.png) no-repeat; .sp-1 i{background-position: 0px 0px;} .sp-2 i{background-position: -26px 0px;} .sp-3 i{background-position: -26px -27px;} .sp-4 i{background-position: 0px -27px;}

    这里应尤其注意到background-position属性中坐标的方向问题,CSS中规定图片的左上方为原点(0px 0px),向左为水平正方向,向上为竖直正方向,而且在写坐标时应特别注意不要忘记单位px


    附件1

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/htm"; charset="utf-8" /> <title>CSS Sprites</title> <style type="text/css"> *{margin: 0px; padding: 0px;} #mainbody{ position: relative; width: 100px; height: 150px; border: solid 2px #fff; padding: 2px; } ul{list-style: none;} li{ display: block; height: 25px; line-height: 25px; overflow: hidden; margin: 5px; border-bottom: 3px solid #dedede } h3{ font-weight: 100; font-size: 14px; text-indent: 10px; } li i{ background: url(00.png) no-repeat; display: inline; width: 25px; height: 25px; float: left; } .sp-1 i{background-position: 0px 0px;} .sp-2 i{background-position: -26px 0px;} .sp-3 i{background-position: -26px -27px;} .sp-4 i{background-position: 0px -27px;} </style> </head> <body> <div id="mainbody"> <ul> <li class="sp-1"> <i></i> <h3>主页</h3> </li> <li class="sp-2"> <i></i> <h3>空间</h3> </li> <li class="sp-3"> <i></i> <h3>网络</h3> </li> <li class="sp-4"> <i></i> <h3>其他</h3> </li> </ul> </div> </body> </html>

    附件2

    素材:

    附件3

    效果图:

    文献2:

    为了提高页面的性能,了解了CSS Sprites;

    所谓CSS Sprites实际上就是对一张图片的重复使用,而这张图片中包含了许多的小图片,我们通过background-image印日大图,利用background-position进行定位,选出该图片中你所需要的那一部分,再将其放在你所想放在的地方;

    这么做可以减少网页的http请求以及图片的字节数;从而提高页面的性能;核心为:

    .pic1,.pic2,.pic3,.pic4{background: url(https://img-blog.csdn.net/20160105223630762);} .pic1{background-position: 0px 0px;} .pic2{background-position: -25px 0px;} .pic3{background-position: 0px -25px;} .pic4{background-position: -25px -25px;}

    对于background-position的定位规则,我们可以查看W3C文档,实际上,左上就是(0px 0px),第一个值是水平方向,第二个值是垂直方向;那么可知,右上就是(-apx 0px),其中a就是右上这个小图片离大图左侧的距离;以此类推;

    实例代码(实现一个响应式的导航栏):

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width initial-scale=1 user-scalable=no"> <script src="jquery-1.8.2.min.js"></script> <title>CSS Sprites简单实例</title> <style type="text/css"> *{ margin:0px; padding: 0px; } ul{ list-style: none; } li{ display: block; width: 25%; height: 50px; float: left; line-height: 50px; text-align: center; background-color: #ddd; } li:hover{ background-color: #eef; } li::after{ content: ''; display: block; clear: both; } i{ position: relative; left: 50%; right: 50%; margin-left: -13px; display: block; width: 25px; height: 25px; border: 1px solid white; border-radius: 50%; cursor: pointer; } .pic1,.pic2,.pic3,.pic4{background: url(https://img-blog.csdn.net/20160105223630762);} .pic1{background-position: 0px 0px;} .pic2{background-position: -25px 0px;} .pic3{background-position: 0px -25px;} .pic4{background-position: -25px -25px;} span{ display: block; width: 100%; height: 20px; line-height: 20px; } @media only screen and (max-width: 600px){ li{ width: 100%; height: 50px; } } </style> </head> <body> <div> <ul> <li> <i class="pic1"></i> <span>house1</span> </li> <li> <i class="pic2"></i> <span>house2</span> </li> <li> <i class="pic3"></i> <span>house3</span> </li> <li> <i class="pic4"></i> <span>house4</span> </li> </ul> </div> </body> </html>

    效果图如下所示:

     

    还是用了一个媒体查询,CSS3的属性,即在屏幕宽度小于600px是,导航栏的每一项宽度变为100%;

    如图:

     

    以上就是CSS Sprites的一个简单实例,实际上应用非常广泛!!!

    参考文献

    https://blog.csdn.net/u013595419/article/details/50465935

    https://blog.csdn.net/zheng_pika/article/details/79687275

    Processed: 0.010, SQL: 8