前提・実現したいこと
ハンバーガーメニューの色を背景色によって変更したい
発生している問題・エラーメッセージ
背景のwidthが100%の部分では思うように色が反転できるのですが、
配置しているboxのwidthを60%、margin:auto;などにしている箇所には色が反転せず、背景の白と被ってしまいます。
原因・対処法などありましたら教えていただきたいです。
該当のソースコード
html
1<div class="menu-btn"> 2 <div id="menu-trigger"> 3 <span></span> 4 <span></span> 5 <span></span> 6 </div> 7</div> 8 9 10<main> 11 12<section class="section1">section1</section> 13<section class="section2">section2</section> 14<section class="section1">section1</section> 15<section class="section2">section2</section> 16<div class="tameshi"> 17 sumple 18</div> 19 20</main>
css
1.menu-btn{ 2 mix-blend-mode: difference; 3 width:15%; 4 position: fixed; 5 top: 30px; 6 right: 30px; 7 text-align: right; 8 z-index: 100; 9} 10 11#menu-trigger, 12#menu-trigger span{ 13 display: inline-block; 14 transition: all .4s; 15 box-sizing: border-box; 16 z-index: 100; 17} 18#menu-trigger{ 19 position: relative; 20 width: 35px; 21 height: 20px; 22} 23#menu-trigger span{ 24 position: absolute; 25 left: 0; 26 width: 100%; 27 height: 1px; 28 background-color: #fff; 29 -webkit-transition: 0.5s ease-in-out; 30 -moz-transition: 0.5s ease-in-out; 31 transition: 0.5s ease-in-out; 32} 33#menu-trigger span:nth-of-type(1){ 34 top:0; 35} 36#menu-trigger span:nth-of-type(2){ 37 top:9px; 38} 39#menu-trigger span:nth-of-type(3){ 40 bottom:0px; 41} 42 43.section1{ 44 width: 100%; 45 height: 300px; 46 background-color: #000; 47} 48.section2{ 49 width: 100%; 50 height: 300px; 51 background-color: #fff; 52} 53.tameshi{ 54 width: 60%; 55 height: 1000px; 56 background: #445566; 57 margin: auto; 58} 59
興味深いですね。firefox では問題なく動作しました。
回答1件
あなたの回答
tips
プレビュー