用透明度叠加两个图像

Question

I'm looking for a solution in Javascript maybe to create a real-time preview of products based on multiple options that a consumer could choose.

Exemple: I have a face.png and a hat.png with transparents parts, and a cap, and when I click on cap, I would like to display the image of the cap + the face and if I click on hat, I would like to update my preview in real time and keep the face and only change the image of the hat (a png with transparency)

Do you have any idea how I could do this?

Thanks in advance !

Answer 1

you can use a container div and place face and hat inside of that div then position each other with position absolute

i added a function for changing hats all hats where transparent at the beginning then we change opacity of the first hat inside of js

by clicking next button we change each hat by setting all hats to transparent again and then bringing back our current hat's opacity to 1

 let hats = Array.from(document.querySelectorAll(".hat")); let currentIndex = 0; hats[currentIndex].style.opacity = 1; function next(){ hats.forEach((hat)=> hat.style.opacity = 0); hats[currentIndex].style.opacity = 1; currentIndex = (currentIndex === hats.length -1)? 0: currentIndex+1; } document.querySelector('#next').addEventListener('click',next)

 .pic{ position:relative; width:200px; height:300px; border:1px solid black; }.face{ position: absolute; height: 150px; width:100px; background:red; bottom:25px; left:50px; }.hat{ width:180px; height:50px; position:absolute; left:10px; bottom:150px; opacity:0; }.pink{ background:#ffc0cba6; }.black{ background:#000000a6; }.yellow{ background:#ffff00a6; }.green{ background:#00ff00a6; }

 <div class="pic"> <div class="face"></div> <div class="hat green"></div> <div class="hat yellow"></div> <div class="hat pink"></div> <div class="hat black"></div> </div> <button id="next">next</button>