1:CSS雪碧图:CSS雪碧图 即 CSS Sprites,也有人叫它CSS精灵图。

  2:雪碧图的由来:一个网站的页面需要大量的小图片或者小图标,但是大量的图片如果放在服务器上,每次当打开网站并且向服务器发送请求,那么请求的次数将大大增加。由此出现了雪碧图的概念

  3:用处:是一种CSS图像合并技术,方法是将众多小图标合并到同一张图上,用来减轻http请求压力。然后通过操作CSS的background属性,控制背景的位置以及大小,来展示需要的部分。

我也从网上找到了一张雪碧图:(其实就是一张图片放置各种各样的小图标)

                      

如果获取精灵图里的小图标呢?

第一步:我们需要下载有关制作图片的软件 例如PS 和 FW  在这我用的是FW。

第二步:把图片在软件中打开。

    打开后:

         1: 在FW的右侧中间层 有一个 图层,然后点击图层里面 有一个叫 位图  在前面的小方框点击一下 就会出现一把锁。这样就不怕把图片搞的乱七八糟的了。

        2:在软件的左侧 WEB里有一个叫 “切片”工具 然后点击 用切片工具去选中精灵图里你想要的图标。

         3: 选中后在软件的下侧就可以查看你选中图片的宽和高 还有图标在图片的位置了。因为只有这种软件才能完美没有误差的获取的到。

第三步:获取到你想要的值后,使用你的编程软件,在你个某个元素设置背景图片的时候先引进 精灵图,然后通过 background-position来定位。

 <div class="twoimage"></div>

  

.twoimage{
width:84px;
height: 47px;
background-image: url(images/cssjlt.png);
background-position: -425px -250px;
}

  

这样就获取到精灵图里的小图标了,可以减少许多不必要的图片。

                                                                                                                 2019-11-07   15:42:42

CSS雪碧图(精灵图)使用的更多相关文章

  1. css雪碧图(精灵图)与字体图标的介绍以及对比

    css雪碧图(精灵图)与字体图标的介绍以及对比 设想一个实际场景:在一个页面为了展示,我们放置了很多独立的小图片,浏览器在显示页面的时候,就需要向服务器就会发送很多请求,来获取并加载这些小图片,但是这 ...

  2. Css雪碧图

    Css雪碧图: CSS雪碧 即CSS Sprite,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分. 原理 ...

  3. 使用compass自动合并css雪碧图(css sprite)

    本文转载自: 使用compass自动合并css雪碧图(css sprite)

  4. 前端优化:css雪碧图实践应用详解

    一 为什么需要使用雪碧图 二CSS雪碧图原理及应用 前端是接近用户体验的一个项目组成部分,合适的优化能够大大减少网页响应时间,合理的资源加载自然成为了工作中的要务,现在就结合实例讲解到底什么是css雪 ...

  5. CSS Sprite、CSS雪碧图应用实例

    CSS Sprites技术被国内一些人称为CSS雪碧图,其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”, ...

  6. css雪碧图实现数字切换

    vue中 css 雪碧图应用及数字切换demo 1. CSS Sprites一般只能使用到固定大小的盒子(box)里,这样才能够遮挡住不应该看到的部分. 2.使用css雪碧图的优点: 利用CSS Sp ...

  7. css雪碧技术的用法。

    ---恢复内容开始--- 在目前前端开发阶段,页面会出现大量的小图片,服务器加载的时候比较吃力,怎么用 一种办法把图片都合并到一张图片上呢?这就用到了css雪碧技术. 雪碧技术是雪碧团队开发,也有人叫 ...

  8. 移动端webapp自适应实践(css雪碧图制作小工具实践)图文并茂

    为什么要写这个 以前写过关于webapp自适应屏幕的文章(链接),不过写的大多数群众看不懂,所以来个图文并茂的版本.虽然只是一个简单的页面,不过在做的过程中也遇到了一些问题,也算是好事吧! 该示例gi ...

  9. CSS雪碧,即CSS Sprite 简单的例子

    CSS Sprite生成工具 http://pan.baidu.com/s/1gdGQwiJ 工具可将多幅图片整合一张,并生成CSS. HTML代码 <style> .img{backgr ...

随机推荐

  1. 【LiteOS】STM32F103-LiteOS移植教程(详细篇)

    总览 本文基于STM32F103C8T6,详细讲述华为LiteOS的移植过程.开发工具是MDK5.LiteOS官方已经适配过cortex M系列内核的单片机,因此移植过程非常简单. LiteOS有两种 ...

  2. Python不再为字符集编码发愁,使用chardet轻松解决你的困扰。

    欢迎添加华为云小助手微信(微信号:HWCloud002 或 HWCloud003),输入关键字"加群",加入华为云线上技术讨论群:输入关键字"最新活动",获取华 ...

  3. 《跟唐老师学习云网络》 -第5篇 Ping喂报文

    [摘要] 这一章节你的角色是国王,你要派一个小兵去对方打探一下.是站在你的角度看这个小兵.哦,对了,这个小兵的名字叫"喂". 一.Ping命令介绍 ping就是用来检测一下网络能不 ...

  4. hdu3999 The order of a Tree

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3999 题意:给一序列,按该序列插入二叉树,给出字典序最小的插入方法建相同的一棵树出来.即求二叉树的先序 ...

  5. HDU3870- intervals(差分约束)

    You are given n closed, integer intervals [ai, bi] and n integers c1, ..., cn. Write a program that: ...

  6. uni-app微信小程序开发之引入腾讯视频小程序播放插件

    登录微信小程序管理后台添加腾讯视频播放插件: 正式开始使用腾讯视频小程序插件之前需先在微信公众平台 -> 第三方设置 -> 插件管理处添加插件,如下图所示: 在uni-app中引入插件代码 ...

  7. asp.net core 拦击器制作的权限管理系统DEMO

    效果图 没有登陆不会执行请求日期的方法,不管是否登陆都不允许访问请求时间方法 验证不通过是会进行转发到Home/error方法中, 代码附上: [Route("[controller]/[a ...

  8. 【Html5】使用学习

    Html5使用学习 目录 1.方式js文件被浏览器缓存 <script>document.write("<script src='y.js?v=" + Date. ...

  9. JQuery 操作checkbox

    获取checkbox选中的状态 deleteAll全选的name 1. $("input[name='deleteAll']").is(":checked") ...

  10. elementui入门

    1.前端服务器搭建 (1)创建一个static web project (2) 安装 npm install -g vue-cli (3) vue init webpack 项目名 (4)cd 项目名 ...