Result
mask-imageとlinear-gradientを使います。
素材次第ではちょっとアーティスティックな合成写真っぽいのが作れそうですね
※右下のRerunを押せば再読み込みして画像が変わります
css
:root {/*境界線を斜めに*/ --direction: -45deg;}main {/*包括要素*/ position: relative;}div {/*各要素基礎設定*/ position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; background-size: cover; background-repeat: none;}.background { background-image: url(https://source.unsplash.com/1600x900/?human);}.foreground {/*マスクレイヤーに指定し、グラデーション+透過処理を加える*/ background-image: url(https://source.unsplash.com/1600x900/?night); mask-image: linear-gradient(var(--direction), black 40%, rgba(0, 0, 0, 0) 60%); mask-position: 50% 50%;} |
html
<main> <div class="background"></div> <div class="foreground"></div></main> |
can i use
css-masksのブラウザ対応状況です
まだ実用には注意が必要そうですね
