目次

はじめに

バックグラウンドマスクとは？

バックグラウンドマスクは、「ポジティブ」と「ネガティブ」のスペースを使用して背景をフレーム化し、新しい形状を作成する機能です。　……　ちょっと分かりにくい説明ですよね（笑）

ざっくりとは「背景をくり抜くことができる機能」です。その背景には、色・グラデーション・画像・ビデオを設定することができます。上のGIFアニメを見ていただくと、イメージを持ちやすいと思います。

・サイトの速さにも配慮！

装飾を凝ってしまうと容量が大きくなりサイトが重くなりがちですが、マスクはSVGを使用して構築されているため、非常に鮮明で軽量、そして要素のサイズに自動的に適合してくれます。

賢いですね(^^)

・マスクは23種類！

Diviには最初から23種類のマスクが用意されています。 そして、マスクを反転、回転、反転して、さまざまなバリエーションを作成することもできます。

バックグラウンドパターンとは？

今回のアップデートで背景パターン全24種類を設定できるようになりました。

・背景パターンについて少し細かく

パターンは、背景色・グラデーション・画像の上、そしてマスクの下に配置されます。 パターンは背景要素をオーバーレイし、ページにテクスチャを追加する機能です。

 パターンを反転、回転、反転して、追加のバリエーションを作成することも、できます。そして、パターンの色とブレンドモードを調整することもできます。 各ブレンドモードは、さまざまな方法で背景色、グラデーション、画像を変えることができます。

おわりに

今回のアップデートも含めて、Diviには、色、グラデーション、画像、ビデオ、マスク、パターンなど、さまざまな背景オプションが用意されました。

これらのオプションはすべて、互いに重ね合わせたり、さまざまな方法で組み合わせて、新しいタイプのデザインを作成することができます。また、いくつかの異なるブレンドモジュールから選択したり、色を調整したり、サイズを変更したりすることもできます。 

これらのオプションを試しながら、新しい背景を作るのも楽しそうですね。画像、グラデーション、パターン、マスクを組み合わせながら、ぜひオリジナルの背景を作ってみて下さい

今回も読んで下さり、ありがとうございました。