実現したいこと
前提
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}
試したこと
position: fixed;をやめてみた
mix-blend-modeをコメントアウトしたり戻したり
background-colorを変えてみた
補足情報（FW/ツールのバージョンなど）
windows11, VSCode, ブラウザはgoogle
0 コメント