Maske klipsi - CSS Hileleri

Anonim

mask-clipCSS özelliği CSS Maskeleme Modülü Seviye 1 şartnamenin parçasıdır ve maske boyama alanı ayarlar. Kelimenin tam anlamıyla bir öğenin arka plan alanını kırpar ve maske aracılığıyla hangi alanların gösterileceğini tanımlar: kenarlık, dolgu veya içerik kutusu. Bu, çerçeveyi bir fotoğrafın üzerine koymak gibi, fotoğrafın yalnızca çerçeveyle kapatılmayan kısımlarını gösterir. Yalnızca bu durumda, CSS Kutu Modeli değerleri kullanılarak kırpılanları belirliyoruz.

.element ( mask-image: url(sun.svg); mask-clip: padding-box; )

Bu, background-clipözellik gibi çalışır , ancak SVG öğeleri için geçerli olan üç ek değere sahiptir. Aşağıdaki demoda bu özelliği kullanarak maske boyama alanını değiştirebilirsiniz. Maskelemenin etkisini daha iyi göstermek ve kenarlık ve dolgu alanlarını işaretlemek için altında aynı resim vardır:

Sözdizimi

mask-clip: = margin-box | border-box | padding-box | content-box | fill-box | stroke-box | view-box | no-clip
  • Başlangıç ​​değeri: border-box
  • Şunlar için geçerlidir: tüm öğeler. SVG'de, tüm grafik öğeleri hariç olmak üzere kap öğeleri için geçerlidir .
  • Devralındı: hayır
  • Animasyon türü: ayrık

Değerler

/* Keyword values */ mask-clip: border-box; mask-clip: content-box; mask-clip: fill-box; mask-clip: margin-box; mask-clip: padding-box; mask-clip: stroke-box; mask-clip: view-box; /* No clip */ mask-clip: no-clip; /* Global values */ mask-clip: intial; mask-clip: inherit; mask-clip: unset;
  • border-box: Boyanmış içerik, kenarlık kutusuna kırpılır. (Varsayılan değer)
  • content-box: Boyanmış içerik, içerik kutusuna kırpılır.
  • fill-box: Boyanmış içerik, nesne sınırlama kutusuna kırpılır.
  • margin-box: Boyanmış içerik, kenar boşluğu kutusuna kırpılır.
  • padding-box: Boyanmış içerik dolgu kutusuna kırpılır.
  • stroke-box: Boyanmış içerik, kontur sınırlayıcı kutuya kırpılır.
  • view-box: En yakın SVG görünüm penceresini referans kutusu olarak kullanır. viewBoxSVG görüntü alanı oluşturma öğesi için bir öznitelik belirtilmişse:
    • Referans kutusu, viewBoxnitelik tarafından oluşturulan koordinat sisteminin başlangıcına konumlandırılır .
    • Referans kutusunun boyutu , niteliğin widthve heightdeğerlerine ayarlanır viewBox.
  • no-clip: Boyanmış içerik kırpılmaz.
  • initial: Özelliğin varsayılan ayarı olan border-box.
  • inherit:mask-clip Ebeveynin değerini benimser .
  • unset: Öğeden akımı kaldırır mask-clip.

Notlar

  • İlişkili CSS mizanpaj kutusu olmayan SVG öğeleri için, değerler content-box, padding-boxiçin fill-boxve için hesaplanır border-boxve margin-boxhesaplanır stroke-box.
  • İlgili CSS yerleşim kutusu elemanlarının değerleri fill-boxolarak hesaplanır content-boxve için stroke-boxve view-boxbilgi işlem başlangıç değerine mask-clipolan border-box.

Birden çok değer kullanma

Bu özellik, maske klipleri için virgülle ayrılmış bir değerler listesi alabilir ve her değer, mask-imageözellikte belirtilen karşılık gelen bir maske katmanı görüntüsüne uygulanır . Aşağıdaki örnekte, birinci değer ilk görüntünün maske boyama alanını, ikinci değer ikinci görüntünün maske boyama alanını vb. Belirtir.

.element ( mask-image: url(image1.png.webp), url(image2.png.webp), url(image3.png.webp); mask-clip: padding-box, border-box, content-box; )

Demo

Tarayıcı desteği

IE Kenar Firefox Krom Safari Opera
Hayır 79+ 53+ Herşey 4+ 15+
Android Chrome Android Firefox Android Tarayıcı iOS Safari Opera Mobile
Herşey Herşey Herşey Herşey 59+
Kaynak: caniuse

Daha fazla bilgi

6 Kasım 2016 tarihli makale

CSS'de Kırpma ve Maskeleme

Mojtaba Seyedi