提供Discuz ,ECShop ,PHPCMS ,帝国CMS ,CSS教程 ,PHP教程 ,DedeCMS ,WordPress ,HTML教程等cms问题查询.
当前位置: HTML教程 > CSS Sprites是什么【html5教程】,Sprites,精灵图,CSS

CSS Sprites是一种机能优化手艺,是一种将多个图象组合成单个图象文件以在网站上运用的要领,以进步机能;也被称为css 精灵图。

为何要运用Sprites(精灵图)?

网页平常包含多个图象。这些包含图标,按钮,徽标,相干图片和其他图形。当页面中加载图象时,浏览器向服务器发出HTTP要求。离别加载每一个图象须要屡次挪用HTTP服务器,这能够致使下载时候变慢以及带宽运用率太高。

CSS Sprites会将多个图象组合成一个称为精灵表或拼贴图的单个图象,用户不下载多个文件,而是下载单个文件并经由过程偏移文件显现必要的图象(或精灵图)。

如许能够削减对服务器的挪用、削减显现网页所需的下载次数,节约带宽并收缩用户端的下载时候,削减收集堵塞。

怎样运用CSS Sprites(精灵图)?

由于CSS Sprites是一张多个图象组合成单个图象,在精灵表中多个图象会被安排在网格状图案里,显现网状散布。

当须要特定图象(精灵图)时,平常会经由过程CSS background-images属性援用精灵表,在经由过程CSS background-position属性对其举行偏移定位获得所需的精灵图,然后以像素为单元定义精灵图的大小。

运用Sprites(精灵图)的实例

精灵图表:

代码示例:

html代码:

<ul class="menu">
        <li class="firefox"><a href="#">Firefox</a></li>
        <li class="chrome"><a href="#">Chrome</a></li>
        <li class="ie"><a href="#">Explorer</a></li>
        <li class="opera"><a href="#">Opera</a></li>
        <li class="safari"><a href="#">Safari</a></li>
</ul>

css代码:

ul.menu {
        list-style-type: none;
        width: 400px;
}
ul.menu li {
        padding:20px 5px;
        font-size: 16px;
        float: left;
        font-family: "Trebuchet MS", Arial, sans-serif;
}
ul.menu li a {
        height: 50px;
        line-height: 50px;
        display: inline-block;
        padding-left: 60px; /* To sift text off the background-image */
        color: #3E789F;
        background:url(Sprites.png) no-repeat; /* As all link share the same background-image */
}
ul.menu li.firefox a {
        background-position: 0 0;
}
ul.menu li.chrome a {
        background-position: 0 -100px;
}
ul.menu li.ie a {
        background-position: 0 -200px;
}
ul.menu li.safari a {
        background-position: 0 -300px;
}
ul.menu li.opera a {
        background-position: 0 -400px;
}
ul.menu li.firefox a:hover {
        background-position: 0 -50px;
}
ul.menu li.chrome a:hover {
        background-position: 0 -150px;
}
ul.menu li.ie a:hover {
        background-position: 0 -250px;
}
ul.menu li.safari a:hover {
        background-position: 0 -350px;
}
ul.menu li.opera a:hover {
        background-position: 0 -450px;
}

效果图:

当鼠标悬停到一个精灵图上时:

动态效果:

总结:以上就是本篇文章的全部内容,愿望能对人人的进修有所协助。

以上就是CSS Sprites是什么的细致内容,更多请关注ki4网别的相干文章!

「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」

分享到:
赞(0) 打赏

支付宝扫一扫打赏

微信扫一扫打赏

上一篇:

下一篇:

相关推荐

0 条评论关于"CSS Sprites是什么【html5教程】,Sprites,精灵图,CSS"

最新评论

    暂无留言哦~~

博客简介

看古风美女插画Cos小姐姐,素材合集图集打包下载:炫龙网,好看二次元插画应有尽有,唯美小姐姐等你来。

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

服务热线:
 

 QQ在线交流

 旺旺在线