CSSだけでつくる二重露光の方法
海外のYoutuberが上げてた動画を見て、CSSだけでつくる画像加工の方法があることを知りました。
似たような写真を探して、同じようにやってみたらできたので、
ちょっと感動しちゃってますｗ
以下コードです。
<body>
<div class="portrait">
<img src="./img/portraite.jpg" alt="" />
<img src="./img/texture.jpg" alt="" class="texture" />
</div>
</body>*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.portrait{
position: absolute;
top:0;
left: 0;
width: 800px;
height: 100vh;
}
.portrait img{
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.portrait img.texture{
mix-blend-mode: multiply;
filter:contrast(1.5)
}
使用した画像は↓こちらの無料サイトUnsplashの写真です。
他にもいろんなやり方ありそうなので、いろいろやってみるの楽しいかもしれないｗ
まーでも、画像加工はPhotoshopでできちゃうので、わざわざCSSを使う必要性はないかもなー・・・？笑
それでも面白い発見でした（＾曲＾）♪