Image Masking
✨ Thanawat Kemwatcharalert
<html> <head> <title>Let's Start</title> <style>* { box-sizing: border-box; } body { margin: 0; background: #8f7a66; } .el { width: 100vw; height: 100vh; padding: 1rem; background-image: url(https://images.unsplash.com/photo-1528287942171-fbe365d1d9ac?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&w=1200&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ); background-size: contain; background-position: center; background-repeat: no-repeat; -webkit-mask-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/sun.svg); -webkit-mask-size: 100vmin; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; } </style> </head> <body> <div class="el"></div> </body> </html>