www.3112.net > Css spritE

Css spritE

通俗点讲CSS Sprite就是将多个背景图片拼合到一个图片上。然后在CSS里通过position定义到该图片上,实现多个位置的背景,一张图片搞定 如: .div,.current{background:url(a.gif) no-repeat} .current{background-position:10px 10px} 好处就是...

css精灵. 比如你的css里面设置了好多background-image背景图片,这些个图片都是单个的。网页在加载的时候,每一张图片都会发起一次请求。这是非常老的做法了...以前做网页都追求这样,图片越小越好,现在的作法就是:把这些小图片全部放到一张大...

说说原理先: CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字能精确的定位出背景图片的位置。...

CSS Sprites技术解析 原先只在CSS玩家之间作为一种制作方法流传,后来出来个 14 Rules for Faster-Loading Web Sites , 技术人员之间竞相传阅,其中第一条规则Make Fewer HTTP Requests就提到CSS Sprites。于是这个小妖精就火了起来,甚至出现了...

如果想灵活性最大(耗时也大)的话,那就是通过手工合并了,切片的工具可以使用ps或者fw.如果想自动化的话,可以借助grunt、gulp、cssgaga都可以实现。

使用sprite sheets。看这里的介绍 http://beyondvincent.com/?p=258#spritesheets

在使用CSS Sprite技术时,做图可以把所有的都做成2倍大小,比如一个图标是32x32,那你就做成64x64,然后使用图片时css尺寸就要设置一半,定位的时候也要用一半,你试着摸索几次就明白了!

这些源代码也许对你有用的: define(["require"], function(require) { var cssUrl = require.toUrl("./style.css"); var link = document.createElement("link"); link.type = "text/css"; link.rel = "stylesheet"; link.href = cssUrl; docum...

通俗点讲CSS Sprite就是将多个背景图片拼合到一个图片上。然后在CSS里通过position定义到该图片上,实现多个位置的背景

1、确定小图的大小,比如宽28px高 28px(width:28px;height:28px) 2、确定小图的左上角距离大图的左上角的高度和宽度,比如高度123px,宽50px(background-position:-50px -123px;) 3、为了使得图片不重复显示,要注意的是添加no-repeat属性和o...

网站地图

All rights reserved Powered by www.3112.net

copyright ©right 2010-2021。
www.3112.net内容来自网络,如有侵犯请联系客服。zhit325@qq.com