css图片精灵

先说一下这里为什么会用到图片精灵呢   因为浏览器每加载一张图片都会发送一次http请求  但对于一些小图片的话 就没必要分几张图片引入了 可以放一张大图上  然后使用图片精灵技术 在div上显示对应的图片  这样就提高了页面的响应速度 ↓↓↓↓↓

div{

      width:200px;

      height:400px;

      margin:100px auto;

      background:url(img/47b1290d43fbbe81e7ddbcbb5c2dd8e7.png) 0 -100px no-repeat;        //用到了  position定位(0  -100px)

}

原文地址:https://www.cnblogs.com/chenchenhao/p/9890004.html

时间: 2024-11-09 02:41:55

css图片精灵的相关文章

使用compass更高效的编辑css --- 图片精灵

compass是sass的一个库,关系相当于js中的jq.比较可惜的是compass的文档比较混乱 看的不太舒服,下面是compass的文档地址,有兴趣的可以去看看 http://compass-style.org/help/documentation/ 在这里我就不仔细讲compass的知识了,可以去阮一峰的博客里面有一遍compass的介绍,附上链接地址 http://www.ruanyifeng.com/blog/2012/11/compass.html 这里主要讲的是图片精灵,我们在网上

DIV CSS Sprites精灵 CSS图像拼合 CSS背景贴图定位教程案例

div css sprites精灵-CSS图像拼合 CSS贴图定位网页背景素材图片拼合定位布局技术教程篇与css sprites实例篇 css sprites拼合背景图片素材实现布局效果截图 一.什么是css sprites   -   TOP css sprites直译过来就是CSS精灵.通常被解释为“CSS图像拼合”或“CSS贴图定位”.其实就是通过将多个图片融合到一张图里面,然后通过CSS background背景定位技术技巧布局网页背景.这样做的好处也是显而易见的,因为图片多的话,会增加

使用Visual Studio创建图片精灵(Image Sprite)——Web Essential

原文:Creating Image Sprite in Visual Studio - Web Essential 译者注:有关图片精灵的信息请参阅http://baike.baidu.com/view/2173476.htm. 通过本文,可以学习到如何使用Visual Studio的Web Essential扩展来创建图片精灵.假如你有一个网站,使用了大量的图像,且每个图像都是通过独立的请求加载的,那么请求的数量就会增加,这样,网站速度就会变慢.而这就需要进行优化,以加快网站速度. 图片精灵是

2017春 前端自动化(四) 图片精灵的使用

前段时间看了个,小伙伴的视频,针对里面的其中一点,"如何提升移动端性能"颇与想法下面,小侃一下:单从图片加载上,来提升下移动端性能. 即为:2017春 前端自动化(四)   图片精灵的使用 一款APP上有很多小图标.不管这些图标,是否在一定周期内,发生变化及更新,都不妨碍我们的图片精灵替换!通过工具"gulp.spritesmith"把这些小图标,整合到一张图片上,节省了加载速度与体积,而且,完全不需要设计师来核对像素.一行命令,我们可以直接生成精灵图片. 继续之前

使用雪碧图Css Sprite精灵 | 加速网页响应速度

什么是CSS Sprite精灵? 是用于前端的一种图片应用技术,通常情况,我们的开发的网页或许有很多张图片,假如在一个页面上有50多张小图片,这意味着浏览器要逐个下载50张图片.Css Sprite它允许你将一个页面涉及到的所有零星图片都包含到一张图中,这样一来,当访问页面时,就只需要下载1张图片了,这显然大大减低了服务器请求压力. 这个技术加速网页响应速度,加速的关键,不是降低质量,而是减少个数.传统切图讲究精细,图片规格越小越好,重量越小越好,其实规格大小无所谓,计算机统一都按byte计算.

CSS之精灵图与字体图标

本文内容: 精灵图 字体图标 首发日期:2018-05-01 精灵图: 在以前,每个图片资源都是独立的一张张图片,浏览器访问网站中的不同网页时是重复获取这一张张图片的,这代表需要访问很多次资源. 为了减少资源的访问次数,将多个常用的图片集合到一张图片中(网页的缓存机制是会略去本地已经有的资源,如果前一次获取到了这个资源,那么后面不会再访问了,直到缓存的资源失效了.[意思有点类似去游乐园,有些票能玩所有游戏,而有些票只能玩一个游戏,如果你拿着能玩所有游戏的票,那你就不用麻烦去一次次买票了]). 将

CSS图片翻转动画技术详解

因为不断有人问我,现在我补充一下:IE是支持这种技术的!尽管会很麻烦.需要做的是旋转front和back元素,而不是旋转整个容器元素.如果你使用的是最新版的IE,可以忽略这一节.IE10+是支持的,IE9完全不支持CSS动画. CSS动画非常的有趣:这种技术的美就在于,通过使用很多简单的属性,你能创建出就连皮克斯动画制作公司也会赞叹的漂亮的消隐效果.其中代表性的一种就是CSS图片翻转效果,能让你看到一张卡片的正反两面上的内容.本文就是要用最简单的方法向大家介绍如何创建这种效果. 简单说明:这并不

css图片的相关操作

css图片的相关操作 1.案例源码 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> *{margin: 0;padding: 0} body{width: 95.2%;margin: 5px auto;} .image{border: 1px solid dark

css图片居中(水平居中和垂直居中)

http://www.51xuediannao.com/html+css/htmlcssjq/css_img_center.html css图片居中分css图片水平居中和垂直居中两种情况,有时候还需要图片同时水平垂直居中,下面分几种居中情况分别介绍 css图片居中分css图片水平居中和垂直居中两种情况,有时候还需要图片同时水平垂直居中,下面分几种居中情况分别介绍. css图片水平居中 利用margin: 0 auto实现图片水平居中 利用margin: 0 auto实现图片居中就是在图片上加上c