0

您好，我目前正在编写一个基于 CSS 3 的精灵生成器，我的问题是：根据具有不同原始图像大小的垂直连接的图像，显​​示带有捆绑精灵图像的 CSS3 背景图像的最佳做法是什么？

我在jsfiddle试过这个，

.gui-background-brand-nodejs-64, .gui-background-brand-grayscale-nodejs-32{
    background-image: url("http://www.shareimages.com/images/pics/0/0/3/65385-rJWWm5Wfk6ainac-sprite.png");
    background-repeat: no-repeat;
    display: inline-block;
    background-size: 100%;
}

.gui-background-brand-nodejs-64{
    width: 238px;
    height: 64px;
    background-position:0 0px;
}

.gui-background-brand-grayscale-nodejs-32{
    width: 119px;
    height: 32px;
    background-position:0 -32px;
}

但这种技术只有在所有图像都具有相同图像大小的情况下才有效。因此，在示例中，第二张图片的高度应为 32px。我已经在jsfiddle制定了妥协的解决方案

1. 通过额外的 HTML 标记，但我认为它很难看，我想知道是否没有完整的 CSS 集成来使 CSS 背景图像真正可用。

2.通过计算

.gui-background-brand-grayscale-nodejs-32 {
width: 119px;
height: 32px;
background-size: 238px;
background-position: 0 -64px;
}

目前我在计算因素

X = (longest image width / current image width)
Y = sum(previous original image HEIGHTs)

background-size: {current image WIDTH*X}px;
background-position: 0 -{Y}px;

我希望可以用原始图像的宽度和高度值来定义 css，因为因子 X 可能会导致十进制值。不容易！

4

1 回答 1

0

好的 。到目前为止没有人回答，所以我决定选择答案 2。通过计算！我已经创建了一个用于 Web 开发的图像处理服务，如果有人感兴趣，它会在https://github.com/sa/scream-js自动处理所有的东西。

于 2013-05-22T17:27:47.443 回答