基于具有不同原始图像大小的图像的带有捆绑 Sprite 图像的 CSS3 背景图像

Question

你好，我目前正在编写一个基于 CSS 3 的 Sprite 生成器，我的问题是:显示 CSS3 背景图像的最佳做法是什么，它基于具有不同原始图像尺寸的垂直拼接图像的捆绑 Sprite 图像显示 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 background-image 真正可用。

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 可以产生十进制值。不容易!

Answer 1

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