Question

我希望能够通过选择你想要的东西来组装三明治。使用单选按钮，我想看到三明治组合，当你点击你想要的东西。我已经制作了三明治的每个部分，我希望能够将每个图像堆叠在另一个上面，所以我不必制作100个独特的图像和功能。与我使用的应用程序类似，如必胜客或多米诺骨牌，订购比萨饼，当您选择所需的比萨饼时，比萨饼的图像会发生变化。

我可以解释它吗？

感谢。

Answer 1

有几种方法可以实现这一目标。一种方法是将背景图像堆叠在彼此之上。您可以使用以下CSS执行此操作：

.image-container{
    background:
        url(meat.png) no-repeat,
        url(lettuce.png) no-repeat,
        url(bun.png) no-repeat;
}

Answer 2

我建议使用画布来顺利渲染

＆＃13;

function draw(){
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    var img=document.getElementById("1");
    ctx.drawImage(img,10,10);
    var img=document.getElementById("2");
    ctx.drawImage(img,10,10);

};
$('#btn').click(function(){draw();});

＆＃13;

<button id="btn" >Draw </button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="1" width="220" height="277" src="http://www.veryicon.com/icon/png/System/Fruity%20Apples/Seablue%20512.png"  style="display:none;" />
    <img src="https://www.wildcardcorp.com/images/company-logos/mac-icon.png" id="2" style="display:none;" />

<p>Canvas:</p>
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>

＆＃13;

使用javascript将透明图像放在另一个和另一个上面

2 个答案: