Maske pozisyonu - CSS Hileleri

Anonim

CSS'de mask-positionözellik, bir maske katmanı görüntüsünün maske konumu alanına göre başlangıç ​​konumunu belirtir. background-positionMülk gibi çalışıyor .

.element ( mask-image: url("star.svg"); mask-position: 20px center; )

Maskeleme, geri kalanını gizlerken bir öğenin seçilen kısımlarını görüntülemenize olanak tanır. Aşağıdaki demoda, maske katmanı görüntüsünün konumunu değiştirebilirsiniz:

Sözdizimi

mask-position: = ( ( left | center | right ) || ( top | center | bottom ) | ( left | center | right | ) ( top | center | bottom | )? | ( ( left | right ) ) && ( ( top | bottom ) ) )
  • Başlangıç ​​değeri: 0% 0%
  • Şunlar için geçerlidir: tüm öğeler. SVG'de, öğe, tüm grafik öğeleri ve öğe hariç kap öğelerine uygulanır .
  • Devralındı: hayır
  • Hesaplanan değer: şunlardan oluşur: orijini temsil eden iki anahtar sözcük ve bu orijinden iki uzaklık, her biri mutlak uzunluk olarak (a verilirse ), aksi takdirde yüzde olarak verilir .
  • Animasyon türü: tekrarlanabilir liste

Değerler

Bir offset anahtar kelimeler açısından belirtilebilir ( top, left, bottom, right, ve center) CSS benzer elemanının kenarları ile ilgili yüzdeler ve uzunluk değerleri background-positionözelliği.

/* Offset keywords */ mask-position: top; mask-position: right; mask-position: bottom; mask-position: left; mask-position: center; 
 /* Length values */ mask-position: 100px 200px; mask-position: 5rem 20%; mask-position: 0 10vh; 
 /* Percentage values */ mask-position: 25% 50%; 
 /* Global values */ mask-position: intial; mask-position: inherit; mask-position: unset;

Değer tanımları

  • : Herhangi geçerli bir CSS uzunluğu (örneğin px, em, remve %maske görüntünün kenar elemanının karşılık gelen kenarından ne kadar uzakta olduğunu belirtmek edecek diğerleri arasında).
  • : Maske katmanı görüntüsünün konumunu, maske konumlandırma alanı eksi maske görüntüsünün boyutuna göre yüzde değeri olarak belirtir.
  • top: Dikey konum için% 0'a eşdeğerdir.
  • right: Yatay konum için% 100'e eşdeğerdir.
  • bottom: Dikey konum için% 100'e eşdeğerdir.
  • left: Yatay konum için% 0'a eşdeğerdir.
  • center: Yatay konum başka türlü belirtilmezse yatay konum için% 50'ye veya dikey konum için% 50'ye eşdeğerdir.
  • initial: Özelliğin% 0% 0 olan varsayılan ayarını uygular.
  • inherit:mask-position Ebeveynin değerini benimser .
  • unset: Öğeden akımı kaldırır mask-position.

Birden çok değer kullanma

Bu özellik, maske konumları 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 konumunu, ikinci değer ikinci görüntünün konumunu vb. Belirtir.

.element ( mask-image: url("image-1.png.webp"), url("image-2.png.webp"), url("image-3.png.webp"); mask-position: 100px 10%, 0 right, center; )

Farklı sözdizimi

mask-position maske katmanının yatay ve dikey konumunu belirtmek için bir, iki, üç veya dört değer alabilir.

Tek değer

Tek bir değerin ayarlanması durumunda bu yatay değer olarak alınır ve dikey değer olarak kabul edilir center.

mask-position: 100px; /* 100px center */
İki değer

Çift değer kullanılması durumunda, ilki yatay değer olarak alınır ve ikincisi, dikey olarak yapma katmanının konumunu belirtir.

mask-position: 10% 50%; /* x=10%, Y=50% */

Her iki değer de anahtar kelime ise, anahtar kelimelerin sırası alakasızdır:

mask-position: top left; /* = left top */

Ancak bir anahtar kelime ve uzunluk veya yüzde kombinasyonuna sahip olduğumuzda , sıra önemlidir ve ilk değer her zaman yatay ofsete karşılık gelir. Bu nedenle:

mask-position: 50% right; /* = horizontal center, vertical right */ mask-position: right 50%; /* = horizontal right, vertical center */
Üç değer

Üç değer verilirse, eksik ofsetin sıfır olduğu varsayılır:

mask-position: left 100px bottom; /* left=100px bottom=0 */
Dört değer

Dört değerli bir sözdizimi, maskeyi göreceli olarak konumlandırdığınızı öğenin hangi taraflarını (1 ve 3 değerleri) ve ardından bu taraflardan uzaklığı (2 ve 4 değerleri) belirlemenize olanak tanır.

Öyleyse, maskeyi öğenin altından 100 piksel ve sağdan 200 piksel yerleştirmek istiyorsanız, aşağıdakileri yapabilirsiniz:

mask-position: bottom 100px right 200px;

Animasyon maskeleri

mask-sizeAşağıdakiler gibi, maske konumunu canlandırmak ve ana kare animasyonu ve CSS geçişini kullanmak mümkündür :

.element ( mask-image: url("mask.png.webp"); mask-position: 10px 10px; transition: mask-position 1s ease-in-out; ) 
 .element:hover ( mask-position: right 10px bottom 10px; )

Bir sonraki demoda, ana kare animasyonunu kullanarak maske katmanının konumunu canlandırıyoruz:

Demo

mask-positionAşağıdaki demoda değerini değiştirin :

Tarayıcı desteği

IE Kenar Firefox Krom Safari Opera
Hayır 18+ 53+ 4+ 3.2+ 15+
Android Chrome Android Firefox Android Tarayıcı iOS Safari Opera Mobile
85+ 79+ 2.1+ 3.2+ 59+
Kaynak: caniuse

Daha fazla bilgi

  • CSS Maskeleme Modülü Seviye 1 (Editör Taslağı)
  • CSS'de Kırpma ve Maskeleme
  • Kırpma ve Maskeleme: Her Biri Ne Zaman Kullanılmalı
  • # 185: CSS Maskeleriyle Oynama (video)