-
投稿者投稿
-
2025年7月28日 10:10 AM #145918
【お使いの Snow Monkey のバージョン】29.1.4
【お使いの Snow Monkey Blocks のバージョン】24.0.4
【お使いの Snow Monkey Editor のバージョン】11.0.2
【お使いのブラウザ】chrome### 実現したいこと
ヘッダーロゴにmix-blend-modeをかけたい
### 発生している問題
.custom-logoにmix-blend-mode: difference;を指定しましたが、反映しないので実現させる方法をご教示いただきたいです。
カスタマイザーの設定は以下にしております
ヘッダーレイアウト:1行
グローバルナビゲーションの配置:右
グローバルナビゲーションを縦書きにする:なし
モバイル用ヘッダー位置:オーバレイ(上部固定)
PC 用ヘッダー位置:オーバレイ(上部固定)### 試したこと
l-headerにmix-blend-mode: difference;を指定すると、実現はできましたが、メニューにはボタンも設置する予定で、ボタンにまでmix-blend-mode: difference;がかかってしまいます。
ボタンにはmix-blend-mode: difference;はかけたくないので、ロゴのみにかける方法をご教示いただけますと幸いです。
よろしくお願いいたします。
♥ 0Who liked: No user2025年7月28日 7:41 PM #145925僕もあんまり理解できていなくて申し訳ないのですが、多分これの関係かなと思います。
ヘッダーをオーバーレイにした段階でスタッキングコンテキストが形成されちゃう気がするので、ロゴだけというのは難しいのかな?という気がしました。
♥ 0Who liked: No user2025年7月29日 10:12 PM #145936ご回答、ありがとうございます!
仰る通り、難しそうだったので、
①header要素にmix-blend-mode←これは効く
②bodyにrelative、ロゴにfixedをかけてheader要素から外す
これで、見た目ではロゴにはmixblendがかからないようにできました。
ありがとうございます。
♥ 0Who liked: No user -
投稿者投稿
- このトピックに返信するにはログインが必要です。

