[hoshiimo.run]

【お使いの Snow Monkey のバージョン】20.0.1
【お使いの Snow Monkey Blocks のバージョン】19.0.1
【お使いの Snow Monkey Editor のバージョン】9.2.0
【お使いのブラウザ】Chrome
【当該サイトのURL】なし

### 実現したいこと

モバイルヘッダーをオーバーレイとした場合に、ハンバーガーメニューの色を背景の色に応じて、変化させる方法を知りたい

### 発生している問題

mix-blend-mode: difference;を指定しても、色が白から変化しない

### 試したこと

以下のCSSを追加しましたが、色が白から変化せず、原因が分かりません。

初歩的な質問で申し訳ありませんが、宜しくお願いします。

.c-hamburger-btn__bar|, .c-hamburger-btn__label {
  mix-blend-mode: difference;
}

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

bar| となっているからではないですかね？ bar だと思います。

♥ 0

いいねをした人: 居ません

[hoshiimo.run]

キタジマ様

ご回答有難うございます。

すみません、コードは打ち間違いです…。

以下のように|を除いても色が変化しません。

 

.c-hamburger-btn__bar, .c-hamburger-btn__label {

mix-blend-mode: difference

; }

♥ 0

いいねをした人: 居ません

[es：エス]

hoshiimo.runさん

おそらくこれでいけると思います。お試しくださいませ。

.l-container>.l-header {
  mix-blend-mode: difference; 
}

♥ 1

いいねをした人:

[hoshiimo.run]

es：エス様

有難うございます！

できました！！

後学のため、一番上のヘッダーに書かないとmix-blend-modeが効かない理由が分かれば教えて頂けないでしょうか？

♥ 0

いいねをした人: 居ません

[es：エス]

解決できたようで何よりです。
この方法ですとメニューテキストにも反映されるため、念のため不要な部分に反映させないようにクエリで指定いただくとよりよいと思います。

@media not all and (min-width:1024px) {
.l-container>.l-header {
mix-blend-mode: difference;
}
}

効かせるのには詳細度が関係していると思います。私もまだまだ勉強中でございます。^^

♥ 0

いいねをした人: 居ません

[hoshiimo.run]

有難うございます！

大変勉強になりました！

♥ 2

いいねをした人:

[投稿者]

投稿