Question

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

尝试了这个

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

Answer 1

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

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

1 个答案: