您的位置： 首页 >日志>前端技术>详细内容

前端技术

[转]CSSSprites第二课：CSSSprites制作工具！

来源：本站原创 发布时间：2011-09-01 09:25:54 浏览次数： 次 【字体：小 大】
CSS Sprite 制作工具
Data URI Sprites
DURIS (Data URI [CSS] Sprites) 是一个管理网页图片的新工具，它可以最大限度的帮助你减少背景图片的数量，减少请求数。
Spritr
一个生成CSS Sprites的简单工具
Sprite Creator 1.0
同上
CSS Sprite Generator
制作CSS sprites 的Drupal插件
CSS Sprites Generator
这个工具允许你上传多张图片生成CSS Sprites和CSS代码
Projekt Fondue CSS Sprite Generator
它具有忽略重复图像，调整图像精度，确定横向和纵向偏移，指定背景色和透明度，指定CSS前缀等众多功能。
SmartSprites
基于java的桌面程序
你可以继续以你自己的方式编写CSS和使用图像，有一个工具可以自动为你设置CSS Sprites，这里是PHP 版本 ，它是开源的，具体可以看：  Chris Brainard’s Sprite Creator 1.0.
附：CSS属性background-position(图像背景位置)该如何设置
background-position( 图像背景位置)这个属性是CSS中非常重要的属性。
根据CSS规范，background-position属性包含了两个(可选的)变量：水平位置(horizontal)和垂直位置(vertical)，例如：
1. .introduction {
2.     background-image: url(bg.gif);
3.     background-position: [horizontal position] [vertical position];
4.     }
.introduction {         background-image: url(bg.gif);         background-position: [horizontal position] [vertical position];         }
使用这个属性，你可以定义块级元素的背景图像位置，可以使用%百分比或px像素为单位来定义图像开始的位置，也可以使用关键字：top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right.
在“ background-position: x% y%;  ”这样一个语句中，x%指水平偏移，y%指垂直偏移，左上角是：0%,0%，右下角是：100%,100%，默认的是50%。
例如，你可以这样定义：
1. ul li {
2.     background-image: url(bg.gif);
3.     background-position: 19px 85px;
4.     },
这样背景图片就被定位到了距离左侧19像素，距离上边85像素。
关于这个属性，可以在这里找到更详细的资料：background-position (CSS property) 。
×

用户登录