首页 > css教程 > 正文

CSS Sprites是什么

原创 2018-12-10 09:20:32 0 982
赞助会员专享特权
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;
}

效果图:

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

动态效果:

GIF.gif

总结:以上就是本篇文章的全部内容,希望能对大家的学习有所帮助。

以上就是CSS Sprites是什么的详细内容,更多请关注php中文网其它相关文章!

  • 相关标签:Sprites 精灵图 CSS
  • 本文原创发布php中文网 ,转载请注明出处,感谢您的尊重!
  • 相关文章


  • CSS 使用Sprites技术实现圆角效果_经验交流
  • css Sprites小实例代码_经验交流
  • Css Sprite 图片等比缩放图片大小(background-size优化Sprites图显示)_html/css_WEB-ITnose
  • CSS Sprites(CSS 精灵)
  • CSS Sprites是什么
  • 网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
    独孤九贱(5)_ThinkPHP5视频教程

    独孤九贱(5)_ThinkPHP5视频教程

    ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架常识开始,将...

    独孤九贱(4)_PHP视频教程

    独孤九贱(4)_PHP视频教程

    江湖传言:PHP是世界上最好的编程语言。真的是这样吗?这个梗究竟是从哪来的?学会本课程,你就会明白了。 PHP中文网出品的PHP入门系统教学视频,完全从初学者的角度出发,绝不玩虚的,一切以实用、有用...

    独孤九贱(1)_HTML5视频教程

    独孤九贱(1)_HTML5视频教程

    《php.cn原创html5视频教程》课程特色:php中文网原创幽默段子系列课程,以恶搞,段子为主题风格的php视频教程!轻松的教学风格,简短的教学模式,让同学们在不知不觉中,学会了HTML知识。 ...

    ThinkPHP5实战之[教学管理系统]

    ThinkPHP5实战之[教学管理系统]

    本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    PHP入门视频教程之一周学会PHP

    PHP入门视频教程之一周学会PHP

    所有计算机语言的学习都要从基础开始,《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术,是学习PHP必须掌握的内容,任何PHP项目的实现都离不开这部分的内容,通...

    作者信息

    青灯夜游

    今天学习一小步,明天提升一大步

    最近文章
    HTML的<script>标签如何使用 946
    html文档的头部元素有哪些 995
    JavaScript的JSON对象如何使用 185

    相关视频教程

  • html/css快速入门 html/css快速入门
  • HTML/CSS  5小时基础入门教程 HTML/CSS 5小时基础入门教程
  • CSS3从入门到精通教程 CSS3从入门到精通教程
  • 快速玩转CSS3教程 快速玩转CSS3教程
  • 相关视频章节