Bir öğenin bir bölümüne veya tümüne bir efekt vermek istiyorsanız CSS’de mask-image tam size göre. Bu gönderide mask-image nasıl çalışır bakıp örnekleri sunacağız.
mask-image 3 maskeleme seçeneği sunar, bir görsel dosyası, SVG ve gradient.
Tarayıcı uyumluluğu konusunda if kullanmanız mümkün:
@supports(-webkit-mask-image: url(#mask)) or (mask-image: url(#mask)){
/* code that requires mask-image here. */
}Örnekler:
Kullanım:
.container img{
height: 100%;
width: 100%;
object-fit: cover;
-webkit-mask-image: url(#mask);
mask-image: url(#mask);
}Kaynak: https://web.dev/css-masking/