エントリーの編集
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
mix-blend-modeとスタックコンテキスト
記事へのコメント0件
- 注目コメント
- 新着コメント
このエントリーにコメントしてみましょう。
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
mix-blend-modeとスタックコンテキスト
CSSのmix-blend-modeを使うと、重なり合った要素同士の色の合成方法を設定できます。これによりPhotosho... CSSのmix-blend-modeを使うと、重なり合った要素同士の色の合成方法を設定できます。これによりPhotoshopなどのグラフィックツールにあるブレンド機能と同じような効果を実現できます。 See the Pen mix-blend-mode basic by Yuhei Yasuda (@yuheiy) on CodePen. 背景にグラデーションを設定し、ブレンドしたい要素にはmix-blend-modeを適用するだけで同じ見た目を実現できます。今回は画像に適用します。 .wrapper { background-image: linear-gradient(to bottom, yellow, red); } img { mix-blend-mode: multiply; } Chromeには<body>とその子孫要素をブレンドできないというバグがあります。そのためページ全