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)


相关推荐

  • HQChart实战教程41 -新浪+腾讯A股数据源对接 – uniapp版本 (源码付费)「建议收藏」

    HQChart实战教程41-新浪+腾讯A股数据源对接-uniapp版本数据源支持周期平台支持demo安卓apk下载源码售价580元效果截图HQChart代码地址数据源使用公开的新浪+腾讯的A股票Api数据,h5页面需要自己配代理跨域.app直接就可以访问,无需自己提供数据后台.支持周期分时,5日,日K,周K,1分钟K,5分钟K,15分钟K,30分钟K,36分钟K平台支持uniapp开发,支持h5和appdemo安卓apk下载https://opensource

  • 怎么查看win服务器端口占用,Windows怎么查看端口占用?查看本机端口占用情况…「建议收藏」

    怎么查看win服务器端口占用,Windows怎么查看端口占用?查看本机端口占用情况…「建议收藏」什么是端口?假设计算机是一座楼房,端口号就是房号,而端口便是楼层入口。如果需要应用程序和服务器连接的话,必须打开该房门才能连接网络访问服务器。正如站在门口的保安,一些启动应用时刻都在占用端口,我们需要怎么了解某个端口被哪个应用程序占用呢,阅读下文了解查看端口占用情况的方法。操作步骤:1、开始→运行→cmd进入命令提示符→输入netstat-ano即可看到所有连接的PID;2、在任…

  • EXTJS 教程目录

    EXTJS 教程目录  本人开发extjs有两三个月了,做了三个左右的项目,其中后台都是用它来完成的。现在想借此机会整理一下用extjs开发的一些思维。  其实本人并没有完全地看过一本extjs的书籍,只是在开发过程中遇到什么问题就去百度什么。结果到现在开发时基本的东西都记不住,每次都是从旧项目中拷贝要用的东西出来,结果效率很慢。ps:以下教程都是采用extjs3.4都编写的  言归正传,以下的目录…

  • MP4格式详解_mp4格式有哪些

    MP4格式详解_mp4格式有哪些一、mp4概述MP4文件中的所有数据都装在box(QuickTime中为atom)中,也就是说MP4文件由若干个box组成,每个box有类型和长度,可以将box理解为一个数据对象块。box中可以包含另一个box,这种box称为containerbox。一个MP4文件首先会有且只有一个“ftyp”类型的box,作为MP4格式的标志并包含关于文件的一些信息;之后会有且只有一个“moov”类型的box(MovieBox),它是一种containerbox,子box包含了媒体的metadata信息;MP4文

    2022年10月16日
  • Linux 修改目录下所有文件权限

    Linux 修改目录下所有文件权限sudochmod777/目录/-R

  • 15种手机游戏引擎和开发工具介绍

    15种手机游戏引擎和开发工具介绍工欲善其事,必先利其器。对移动游戏开发者来说,高效实用的开发工具必不可少。近日,英国著名产业杂志《Develop》刊出了一篇文章,作者艾伦·李在文中推荐了15种移动游戏开发工具,从游戏引擎,到音效制作、推广等工具都有涉及。以下为原文主要内容编译。引擎和移动开发工具包Marmalade简介:Marmalade被很多人认为是跨平台制作C++游戏的最佳平台。通过MarmaladeSDK,开发者可以在单一的Marmalade项目文件夹中打开Xcode或VisualStudio,将

发表回复

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

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