エントリーの編集
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
CSSのmix-blend-mode: overlayで画像の上にテキストをオーバーレイする
記事へのコメント0件
- 注目コメント
- 新着コメント
このエントリーにコメントしてみましょう。
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
CSSのmix-blend-mode: overlayで画像の上にテキストをオーバーレイする
/* 一部省略しています。完成形のCSSはCodePenをチェックしてください */ .container { position: relat... /* 一部省略しています。完成形のCSSはCodePenをチェックしてください */ .container { position: relative; } .text { margin: 0; /* 見出しのマージンを消しておく */ position: absolute; /* 絶対配置で画像の中央に配置 */ left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; color: #FFF; font-weight: 800; font-size: 100px; mix-blend-mode: overlay; /* 👈 ポイント */ } mix-blend-modeのオーバーレイ(overlay)とは MDNにもあまり詳しい解説が載っていなかったので、仕様書を読んでみます。引用とざっくりとした意訳を載せ