２つの画像を重ねて、重なり部分だけ透過させたい

Question

タイトル通りです。
２つの画像を部分的に重ねて、その重なっている部分だけを透過させたいです。
おそらくrgbaを使うのかなと初心者ながら考えているのですが、よくわかりません。
よろしくお願いいたします。

<div>
  <img class="image-red" src="image/imagered.jpg">
  <img class="image-green" src="image/imagegreen.jpg">

</div>

.image-red{
position:relative;
}
.image-green{
position:absolute;
top:50px;
left:23px;
}

Answer 1

% とか vw, vh とかで割合配置されてるとCSSだけでは無理です
CSSで他の要素の位置を取得することはできません
重なっている部分というのを認識できないです

重なった位置を固定で計算できる or javascript を使えば計算できるので
それ以外の部分をL字にクリップすることで可能です

サンプル

<style> 
.bg{
  position:  absolute;
  top: 0px;  left: 0px;
}
.image-red{
  position:  absolute;
  top: 150px;  left: 150px;
  clip-path: polygon(0px 0px,150px 0,150px 50px,50px 50px,50px 150px,0 150px);
}
.image-green{
  position:  absolute;
  top: 200px;  left: 200px;
  clip-path: polygon(100px 0,150px 0,150px 150px,0 150px,0 100px,100px 100px);
}
</style>

<img class="bg" src="https://placehold.jp/80/ffffff/888888/500x500.png">
<img class="image-red" src="https://placehold.jp/24/ffeeee/ff8888/150x150.png">
<img class="image-green" src="https://placehold.jp/24/eeffee/008800/150x150.png">

Comments

[kmome]

ご回答ありがとうございます。
ぜひ試してみます。