1

我在通过 sprite 方法制作的单个 png 中有三张图像，我想要在第三张图像中放置一个表格。

我想将第一个图像（maquina_bola）放在第二个图像（maquina_vidro）上，将第二个图像放在第三个（maquina_azul）上而不改变桌子的位置。

我可以使用单独的图像文件来做到这一点，如示例代码中所示。但是对精灵图像使用相同的代码，图像不会重叠。

有人可以帮助我吗？

<div class="maquina maquina_azul">
                        <div class="maquina_vidro"></div>
                        <div class="maquina_bola"></div>
                        <div style="padding-top:250px; padding-left:20px;">

                        </div>
                    </div>

小提琴 1 - 冲刺图像

而且必须变成这样

小提琴 2- 完美

4

2 回答 2

2

你去：http: //jsfiddle.net/Yy3zZ/1/

1）图片顺序错误。球必须在碗的后面。
2) 图像必须重叠，因此position必须将它们设置为absolute
3) 容器 ( _azul) 必须relative定位
4) 然后您必须调整每个图像的left和top属性，使它们处于正确的位置。

.maquina_azul{ 
    background: url('http://img823.imageshack.us/img823/7182/wpbl.png') no-repeat -2px -4px;
    width: 290px; height: 710px;
    position:relative;
    margin-top:40px;
}

.maquina_bola{ 
    background: url('http://img823.imageshack.us/img823/7182/wpbl.png') no-repeat -60px -768px;
    width: 176px; height: 176px;
    position:absolute; 
    left:60px; top:-35px;
}

    .maquina_vidro { 
    background: url('http://img823.imageshack.us/img823/7182/wpbl.png') no-repeat -378px -1610px;
    width: 224px; height: 110px;
    position:absolute; 
    left:35px; top: 43px; 
}
于 2013-10-02T19:23:09.820 回答
0

冲刺图像的最佳方法是：

Sprite Cow - 为精灵表生成 CSS

它也可以在离线模式下工作；）

于 2014-02-26T11:33:02.803 回答