CSS 固定ヘッダーでmix-blend-modeが反映されません

実現したいこと

mix-blend-modeを使って、固定ヘッダーの文字色を画像に重なったときに変化させて見えるようにしたい。

前提

HTMLとCSSを使って勉強のため自作ウェブサイトを作成中。

mix-blend-modeでスクロールしたときに固定ヘッダーの文字が画像に重なっても文字色を変化させて見えるようにしようとしたところ、固定ヘッダーが全部消えてしまいました。

スタックコンテキストがなんたらなどいろいろ調べたんですけどわかりませんでした、、、
それ以前の問題かもしれないです。

その他のCSSの記述でも気になる点があればご指導お願いします。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4   <meta charset="UTF-8">
5   <meta name="viewport" content="width=device-width, initial-scale=1.0">
6   <link rel="preconnect" href="https://fonts.googleapis.com">
7   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
8   <link href="https://fonts.googleapis.com/css2?family=Sawarabi+Mincho&display=swap" rel="stylesheet">
9   <!-- reset.css destyle -->
10   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/destyle.css@1.0.15/destyle.css"/>
11   <link rel="stylesheet" href="css/style.css">
12   <script src="js/rellax-master/rellax.min.js"></script>
13   <script src="js/script.js" defer></script>
14   <title>Document</title>
15</head>
16<body>
17   <header>
18      <h1><img src="img/friendly-s-restaurant.svg" alt=""></h1>
19      <nav>
20         <ul>
21            <li><button><a href="">Home</a></button></li>
22            <li><button><a href="">About</a></button></li>
23            <li><button><a href="">Contact</a></button></li>
24            <li><button><a href="">Access</a></button></li>
25         </ul>
26      </nav>
27   </header>
28   <main>
29      <section class="section_1">
30         <div class="parallax">
31            <img src="img/img5.jpg" id="img1" class="img" data-rellax-speed="7" data-rellax-zindex="1">
32            <img src="img/img1.jpg" id="img2" class="img">
33         </div>
34      </section>
35   </main>
36</body>
37</html>

CSS
1@charset "UTF-8";
2
3body {
4    background-color: #ffffff;
5    font-family: 'Sawarabi Mincho', 'Shippori Mincho', serif;
6    font-size: 16px;
7    line-height: 1.5;
8}
9header {
10    display: flex;
11    position: fixed;
12    top: 0;
13    left: 0;
14    height: 126.5px;
15    mix-blend-mode: difference;
16}
17img {
18    width: 300px;
19}
20ul {
21    display: flex;
22}
23nav {
24    margin: 50px 10px;
25}
26li {
27    margin: 0 26px;
28}
29button {
30    color: black;
31    text-decoration: none;
32    font-size: 15px;
33    border: none;
34    background: none;
35    font-weight: 600;
36}
37button::before {
38    margin-left: auto;
39}
40button::after, button::before {
41    content: '';
42    width: 0%;
43    height: 2px;
44    background: black;
45    display: block;
46    transition: 0.5s;
47}
48button:hover::after, button:hover::before {
49    width: 100%;
50}
51.section_1 {
52    display: flex;
53    height: 150vh;
54    position: relative;
55}
56#img1 {
57    width: 500px;
58    position: absolute;
59    top: 300px;
60    z-index: -1;
61}
62#img2 {
63    width: 700px;
64    position: absolute;
65    top: 0;
66    right: 0;
67    z-index: -1;
68}
69main {
70    margin-top: 126.5px;
71}