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

Question

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

示例：我有一个 face.png 和一个 hat.png 带有透明部分和一个帽子，当我点击帽子时，我想显示帽子 + 脸的图像如果我点击帽子上的按钮收音机，我想实时更新我的预览并保留面部，只更改帽子的图像（透明的 png）

你知道我该怎么做吗？

提前致谢！

Answer 1

你可以使用一个容器 div 并将脸和帽子放在里面 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>

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

Overlay of two images with transparency

html

javascript

php

png