ブレンドモードを使用してコンテンツをトリミングする

ブレンド モードを使用して、div ブロック内の白黒コンテンツをクリップします。
明るくするブレンド モードと暗くするブレンド モードはシェイプ カッターのように機能し、デザイン内の暗い要素または明るい要素から元の塗りつぶしを削除して、それらの要素を通して背景を表示します。単色、画像、ビデオなど、任意の背景を使用して、要素を通して輝かせることができます。

まず挿入する セグメント キャンバスに描きます。その後、 背景ビデオ または ビジュアル コンポーネントと ブロック要素 以内 セグメント最後に、テキストユニット、段落、ボタンなどのコンポーネントを ブロック要素.

あなたはあなたの 背景ビデオ または ビジュアル これらの要素を通して表示されるため、高さや寸法などを適宜調整してください。背景ビデオの詳細をご覧ください。

ナビゲーター パネルでは、「コンテンツ ブロック」という名前の Div ブロックと背景ビデオがセクション内にネストされています。

白いブロック要素を使用してブレンドモードを調整するには:

  1. 選択してください ブロック要素
  2. アクセス デザインパネル > 背景
  3. パレットをタップ 色合い 適用する ブロック要素 背景として
  4. 色合い(背景色、テキスト色など)を設定する すべてのコンポーネントについて ブロック要素 透明になりたい
  5. 選択してください ブロック要素
  6. アクセス デザインパネル > 影響
  7. 展開する マージ メニューから選択 明るくする
スタイル パネルの [効果] セクションで、ブレンドが [明るくする] に設定されています。

黒いブロック要素でブレンドモードを設定するには:

  1. 選択してください ブロック要素
  2. アクセス デザインパネル > 背景 
  3. パレットをタップ 色合い 適用する ブロック要素 背景として
  4. 色合い(背景色、テキスト色など)を設定する すべてのコンポーネントについて ブロック要素 透明になりたい
  5. 選択してください ブロック要素
  6. アクセス デザインパネル > 影響
  7. 展開する マージ メニューから選択 薄暗い

明るくする 暗い要素を消滅させる。 薄暗い 光沢のある要素を消します。ブレンドモードの詳細をご覧ください。

ブレンディングは明るく設定されており、白い div ブロック内のネストされた要素を通してビデオの背景を見ることができます。
ブレンディングは暗く設定されており、黒い div ブロック内のネストされた要素を通してビデオの背景を見ることができます。
リマインダー: ウェブサイトにはあらゆる種類の背景 (ビデオ、画像、色相など) を挿入できます。挿入する背景がブロック要素の背景と十分に異なることを確認してください。これにより、ブロック要素内のテキストやその他の要素が目立つようになります。詳細については、Webflow University の色のコントラスト比に関するレッスンをご覧ください。
ユアン・マック