css精灵图怎么改尺寸 |uploadify css

然而，当大家需要调整CSS精灵图中的小图片尺寸时，就需要注意一些问题。

// 以下是CSS精灵图的一部分代码
.icon {
background-image: url(sprite.png); // CSS精灵图的地址
background-repeat: no-repeat;
display: inline-block;
width: 30px; // 每个小图片的宽度
height: 30px; // 每个小图片的高度
}
.icon-01 {
background-position: 0 0; // 获取第一张小图片
}
.icon-02 {
background-position: -30px 0; // 获取第二张小图片，偏移量为每个小图片的宽度
}
.icon-03 {
background-position: -60px 0; // 获取第三张小图片，偏移量为每个小图片的宽度 x 2
}

如果大家需要调整CSS精灵图中的小图片尺寸，例如将图片宽度调整为50px，高度调整为50px，那么大家需要将 .icon 的宽度和高度都调整为50px，这样每个小图片才能正确居中。同时，大家还需要调整每个小图片在CSS精灵图中的偏移量。

.icon {
background-image: url(sprite.png);
background-repeat: no-repeat;
display: inline-block;
width: 50px; // 将每个小图片宽度调整为50px
height: 50px; // 将每个小图片高度调整为50px
}
.icon-01 {
background-position: 0 0;
}
.icon-02 {
background-position: -50px 0; // 每个小图片的偏移量需要相应调整
}
.icon-03 {
background-position: -100px 0; // 每个小图片的偏移量需要相应调整
}

总之，在调整CSS精灵图中的小图片尺寸时，大家需要保证每个小图片的宽度和高度相同，并且调整每个小图片在CSS精灵图中的偏移量，才能确保页面展示正确。