mix-blend-modeで乗算がかからない

Question

前提・実現したいこと

//背景の固定画像
<style>
.backimg {
   position:fixed;
   z-index:-999;
   height:100vh;
   width:100vw;
   background-image:url("img/back02.jpg");
   backgound-size:cover;
   background-position:center;
   transition: .5s;
   opacity:0.5;
}
</style>
<div class="backimg"></div>

//乗算で背景画像の上に載せる画像
<style>
.back-pattern {
   position: absolute;
   z-index:-1;
   width:100vw;
   height:1080px;
   object-fit:cover;
   mix-blend-mode:multiply;
}
</style>

<div style="height: 1080px;">
<img src="img/backimage01.png" alt="背景パターン" class="back-pattern">
</div>
<div style="height: 1080px;">
<img src="img/backimage02.png" alt="背景パターン" class="back-pattern">
</div>

上記コードで背景に画像を固定して、その上に<img>をのせて、ブレンドモードで乗算にしたい。

発生している問題・エラーメッセージ

1枚目は問題なく理想どおりの結果になっていますが、2枚目以降がうまく乗算されません。

![]

Comments

[Lhankor_Mhy]

問題が再現しませんでした。
https://jsfiddle.net/Lhankor_Mhy/qpbtk1va/1/