別の要素を重ねる
写真の上に置いた図形や文字など、要素そのものを背後と合成します。
CSS COMPOSITING · BLEND MODES
CSS Blend Mode Lab
写真に重ねた色や文字を、合成モード別に比べる。
016 BLEND MODES
LIVE BLEND TEST
重ねる色が、写真によって変わる
blend.local / live previewMULTIPLY
LIVE COMPOSITING
写真と、色の重なりを見る
BLEND
写真からはみ出た部分も表示されたままです。合成グループを分離すると、その部分は外側の濃い背景と合成されなくなります。
SELECTED MODEmultiply
ISOLATIONauto
COLOR#ffb100
写真の色に応じて結果が変わるため、文字に使う場合は読みやすさを別途確認してください。
MODE GALLERY
同じ写真と色で、6つを比較
02
WHICH PROPERTY?
何を合成するかで、指定先が違う
背景レイヤー同士を重ねる
同じ要素に指定した背景画像と背景色・グラデーションを合成します。
合成相手をグループ内に限定する
子要素に合成モードを指定すると、同じグループの写真とは合成できますが、グループ外の背景とは合成しません。はみ出した表示は切り取りません。