html精灵图跟img标签,css精灵图怎么使用?

html精灵图跟img标签,css精灵图怎么使用?什么是css精灵图(sprite)?css精灵图怎么使用?下面本篇文章就来给大家介绍一下css精灵图的使用。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。在了解精灵图怎么使用前,我们要先知道什么是精灵图。只有先知道什么是精灵图,了解精灵图的原理了,我们才可是说使用精灵图。什么是css精灵图(sprite)?css精灵图(sprite)直译为“CSS精灵”,也被称为通常被解释为“C…

大家好,又见面了,我是你们的朋友全栈君。

什么是css精灵图(sprite)?css精灵图怎么使用?下面本篇文章就来给大家介绍一下css精灵图的使用。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

edf533a2e3917a18510caf2be83b3cc1.png

在了解精灵图怎么使用前,我们要先知道什么是精灵图。只有先知道什么是精灵图,了解精灵图的原理了,我们才可是说使用精灵图。

什么是css精灵图(sprite)?

css精灵图(sprite)直译为“CSS精灵”,也被称为通常被解释为“CSS图像拼合”、“CSS贴图定位”或“CSS图片精灵”、“CSS雪碧图”,是一种网页图片应用处理方式。其实就是把一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。

怎么使用css精灵图(sprite)?

css精灵图(sprite)其实就是通过将多个图片融合到一张图片文件中,然后通过CSS background背景定位技术技巧布局网页背景。在需要用到图片的时候,现阶段是通过CSS属性background-image组合background-repeat, background-position等来实现图片的显示。

使用精灵图的优点对于浏览器来说请求多张小的图片和请求一张大的图片当然是后者的性能更好,大大减少了浏览器向服务器的请求次数,减少了http请求次数,这也是精灵图被广泛使用的主要原因。

使用精灵图可以减少图片的字节数,如果一张图片是4K,9张就是36K,而将所有图片整合在一张图片上之后,只需要4-5K就可以了。

在整理图片时,不需要纠结图片的取名问题,特别是在大型浏览器中,这种小的图片非常之多。将所有图片整合在一起,只需要取一个综合的名字就可以了,这样也可以大大提高工作效率。

如果想改变网站的风格,只需要改变一张图就可以了,便于后期的维护和修改。

使用精灵图的缺点一定要考虑当前盒子的大小会不会漏出其他图片,一般情况来说还可以,但是如果网页时自适应的,那么可能就会比较麻烦了。

精灵图的创建比较麻烦,要计算好每个图片之间的距离和位置,如果做的不合理,那么使用时就会比较麻烦。

精灵图在后期维护上也带来了一定麻烦,因为所有的图片是在一张图片上,甚至位置都是相互影响的,所以一旦改变了一个,可能整张精灵图都需要重新做。

实例

精灵图表:

85a1d22a8041757bf8e2e7161068bc54.png

代码示例:

html代码:

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;

}

效果图:

fc275c8741418b81870a382e1233e7f7.gif

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/138980.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • datagrip 激活码【2021最新】

    (datagrip 激活码)2021最新分享一个能用的的激活码出来,希望能帮到需要激活的朋友。目前这个是能用的,但是用的人多了之后也会失效,会不定时更新的,大家持续关注此网站~https://javaforall.cn/100143.htmlIntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,上面是详细链接哦~ML…

  • javascript三目运算符的嵌套

    javascript三目运算符的嵌套普通的三目运算符比较简单,就不做介绍了,如(expr1)?(expr2):(expr3),之前在使用三目运算符嵌套的时候,我是这样用的(expr1)?(expr2)

  • 聚集索引和非聚集索引的区别[通俗易懂]

    聚集索引和非聚集索引的区别[通俗易懂]一、深入浅出理解索引结构实际上,可以把索引理解为一种特殊的目录。微软的SQLSERVER提供了两种索引:聚集索引(clusteredindex,也称聚类索引、簇集索引)和非聚集索引(nonclusteredindex,也称非聚类索引、非簇集索引)。下面,我们举例来说明一下聚集索引和非聚集索引的区别:其实,我们的汉语字典的正文本身就是一个聚集索引。比如,我们要查“安”字,因为“安”的拼音是…

  • 让自己的网站或博客被百度收录的小技巧

    让自己的网站或博客被百度收录的小技巧

    2021年10月29日
  • linux定时器编程实验报告,Linux定时器实验.doc[通俗易懂]

    linux定时器编程实验报告,Linux定时器实验.doc[通俗易懂]Linux定时器实验Linux第六次实验及分析报告实验要求:1)在用户态编写一个程序,该程序设定一个定时器,在时间到期的时候做出某种可观察的响应(方法不限)2)分析你的程序的实际执行借助了内核的哪些机制3)提交实验与分析报告一:在用户态编写一个程序,该程序设定一个定时器,在时间到期的时候做出某种可观察的响应(方法不限)G++进行编译运行结果如下:可见调用间隔定时器定时10秒成功!二:分析你的程序的…

  • 【愚公系列】2022年03月 微信小程序-富文本编辑器

    【愚公系列】2022年03月 微信小程序-富文本编辑器<viewclass=”container”style=”height:{{editorHeight}}px;”><editorid=”editor”class=”ql-container”placeholder=”{{placeholder}}”bindstatuschange=”onStatusChange”bindready=”onEditorReady”></editor></view><scroll-views

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号