自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。基本インドアです!InstagramTwitterContactサーバーとドメインの同時取得で.jpが無料シュウ今回は【CSS】画像の透過について、mix-blend-modeを使ってみよう!の解説になります!こんな方に読んでほしいCSSを学び始めた方へCSSについて学びたい方へ今回はmix-blend-mode(画像の透過)について解説しております。上記のイメージ図のように、画像の上に重ねた要素に対して、「乗算」、「スクリーン」といった透過要素の指定が可能になります。IEも終了したので問題なく使えるとおもいます。use」(https://caniuse.com/)では、対象のブラウザでの動きの確認が可能になります。黄色枠に対象となるCSSを入力してください。use[記事の内容]mix-blend-modeについて乗算についてスクリーンについてオーバーレイについて比較:明についてその他のmodeはこちらまとめmix-blend-modeについてmix-blend-modeとは、「乗算」、「スクリーン」、「オーバーレイ」、「比較」、「ハードライト」など全16種類の指定が可能です。デモサイトはコチラから。基本構造の書き方は以下のようになります。/*--modeを指定--*/}画像の領域等はご自身で指定してください。normalは、デフォルト指定になります。乗算について乗算の書き方は以下のようになります。/*--modeを指定--*/}スクリーンについてスクリーンの書き方は以下のようになります。/*--modeを指定--*/}オーバーレイについてオーバーレイの書き方は以下のようになります。/*--modeを指定--*/}比較:明について比較:明の書き方は以下のようになります。/*--modeを指定--*/}その他のmodeはこちら全16種類は以下のようになります。normal通常multiply乗算screenスクリーンoverlayオーバーレイcolor-dodge覆い焼きcolor-burn焼き込みdarken比較(暗)lighten比較(明)hard-lightハードライトsoft-lightソフトライトdifference差の絶対値exclusion除外hue色相saturation彩度colorカラーluminosity輝度まとめ今回はこれで以上です。POINTCSSmix-blend-modeについて解説しました。IEも終了したので問題なく使えるとおもいます。「乗算」、「スクリーン」、「オーバーレイ」、「比較」、「ハードライト」など全16種類の指定が可能です。自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。