精灵图 详解

精灵图 详解精灵图技术why?1.减少请求次数,提高界面加载速度what?图片拼合技术,它就是把多张小图合成一张大图,利用 背景定位属性background-position:xpxypx实现显示大图当中的某一个小图how?1.确定显示小图片的那个盒子的宽高2.以背景的方式插入精灵图background-image:url();3.移动图片的定位位置background-positi…

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

精灵图技术

why?

1.减少请求次数,提高界面加载速度

what?

图片拼合技术,它就是把多张小图合成一张大图,利用 背景定位属性background-position:xpx ypx 实现显示大图当中的某一个小图

how?

1.确定显示小图片的那个盒子的宽高

2.以背景的方式插入精灵图 background-image:url();

3.移动图片的定位位置 background-position:xpx ypx 向上移动以及向左移动 位置肯定是负值

注:background-position: 水平/px 垂直/px

打开PS,打开所要用的精灵图。
按住 alt+滚轮 放大到可视大小
选择【矩形选择工具】套住想要实现的部分
在这里插入图片描述
拉辅助线,选中标尺工具在这里插入图片描述在这里插入图片描述
得到width 和 height
css代码:

	 width: 27px;
    height: 25px;
    background-image: url(../资料/精灵图应用_看图王.png);
    background-repeat: no-repeat;
    background-position: -303px -13px;

![在这里插入图片描述](https://img-blog.csdnimg.cn/20190718154105583.png
同理 获取亮色的图标 设置悬停hover属性
.box:hover{

background-position: -128px -217px ;
}
在这里插入图片描述

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

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

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

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

(0)


相关推荐

  • Windows:安装cygwin教程[通俗易懂]

    目录目录前言常见错误前言本篇文章参考这篇:cygwin安装但自从博主写后,这个东西发生了一些变化,因此,根据最新版的重新写了一遍。我们可以到Cygwin的官方网站下载Cygwin的安装程序或者直接使用来下载安来下载安装程序.下载完成后,运行setup.exe程序,首先是同意安装,第三方的软件在windows上不受信任,出现安装画面。直接点“下一步”,…

  • IDEA配置Maven(详细版)

    IDEA配置Maven(详细版)IDEA配置MavenIDEA创建Maven工程第一节IDEA集成Maven插件第二节使用骨架创建Maven的java工程第三节不使用骨架创建Maven的java工程第四节使用骨架创建Maven的javaweb工程第五节不使用骨架创建Maven的javaweb工程第六节IDEA使用Maven命令6.1方式一6.2方式二IDEA创建Maven工程第一节IDEA集成Maven插件打开IDEA,进入主界面后点击configure,然后点击settings在上面的快捷查找框

  • importerror cannot import name_cannot resolve plugin org.apache

    importerror cannot import name_cannot resolve plugin org.apache今天测试一款轻量级的爬虫库:[RoboBrowser]。(https://github.com/jmcarp/robobrowser)github上的介绍是这样的:结合使用了Requests和BeautifulSoup,具体就不介绍了,这里主要是提一下碰到的问题:cannotimportname‘cached_property’from‘werkzeug’(C:\Users\79229\AppData\Local\Programs\Python\Python38\lib\site

  • Android开发环境配置(以windows为例)

    Android开发环境配置(以windows为例)Android开发环境配置工具   如果你准备从事Android开发,那么无论选择在eclipse下开发,还是选择在AndroidStudio下开发,都可以参照以下步骤进行Android开发环境的配置。Android开发环境配置过程1.准备笔记本或台式机  使用笔记本还是台式机,视个人需求而定,但我要强调的是在配置上不要手软,要舍得下手。一台流畅的电脑,会让

  • 光棍节程序员闯关秀第9关(总共10关) 解题步骤

    光棍节程序员闯关秀第9关(总共10关) 解题步骤题目链接:http://segmentfault.com/game/?k=4999c12ce5be7c3cba227ba9f4f7d797解题步骤:1.应景嘛,把所有的空格替换成11112.8位二进制转换成一个byte,解释为ASCII字符3.得到一个BASE64加密在字符串4.用 BASE64Decoder解密5.另存为

  • python3:两数之和

    python3:两数之和

发表回复

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

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