位置：首页>> 网络编程>> 网页设计>> 解密CSS Sprites：技巧、工具和教程（5）

解密CSS Sprites：技巧、工具和教程（5）

　来源：Oncoding编码营　发布时间：2011-01-11 19:38:00　

标签：CSS,Sprites,技巧,工具

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)。

英文原文：Smashing Magazine
中文翻译：Oncoding编码营

第一页上一页 1 2 3 4

投稿

解密CSS Sprites：技巧、工具和教程（5）

猜你喜欢