具有透明度的两个图像的叠加

Question

我正在寻找一个Javascript解决方案，也许可以基于消费者可以从多个单选按钮中选择的多个选项来创建产品的实时预览。

示例：我有一个face.png和一个带有透明部件的hat.png，还有一顶帽子，当我点击帽子时，我想显示帽子+脸的图像，如果我点击帽子上的单选按钮，我想实时更新我的预览，保留脸，只更改帽子的图像(带透明的png(

你知道我该怎么做吗？

提前感谢！

Answer 1

您可以使用容器div，将face和hat放置在该div内，然后使用位置绝对相互定位

我增加了一个换帽子的功能通过点击帽子的缩略图，用户将更改我们显示的实际帽子图像的src属性

let hats = [
"https://m.media-amazon.com/images/I/81B6-uzku8L._UX679_.jpg",
"https://rukminim1.flixcart.com/image/714/857/jiulk7k0/cap/g/r/v/free-hat-peter-india-original-imaf6gzbhh7pydzy.jpeg?q=50",
"https://contents.mediadecathlon.com/p982435/31cf29c7f44e13d3f77af7bd205a303c/p982435.jpg"
];
let currentIndex = 0;

document.addEventListener("DOMContentLoaded",()=>{
let thumpnails = document.querySelector('.thumpnails');
hats.forEach((hat)=> {
let img = document.createElement('img');
img.src = hat;
img.classList.add('thumpnail');
thumpnails.append(img);

img.onclick= ()=>{showMe(hat)};

});
})
function showMe(src){
document.querySelector('.hatImg').src = src;
}
//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;

}
.hatImg{
width:180px;
position:absolute;
left:10px;
bottom:100px;
opacity:0.8;
}
.thumpnail{
width:50px;
margin: 0.25rem;
}

<div class="pic">
<div class="face"></div>

<img class="hatImg" src="https://m.media-amazon.com/images/I/81B6-uzku8L._UX679_.jpg">
</div>
<div class="thumpnails"></div>