Maske boyutu - CSS Hileleri

Anonim

CSS'de maske boyutu özelliği, maske katmanı görüntüsünün boyutunu belirtir. Birçok yönden, background-sizemülk gibi çalışır .

.element ( mask-image: url(star.svg); mask-size: 200px 100px; )

Maskeleme, geri kalanını gizlerken bir elemanın seçilen kısımlarını görüntülemenize olanak sağlar. Maskenin boyutu mask-sizeözellik tarafından belirlenir .

Aşağıdaki demoda, maske katmanı görüntüsünün boyutuyla oynayabilirsiniz:

Sözdizimi

mask-size: = ( = | | auto )(1,2) | cover | contain
  • Başlangıç ​​değeri: auto
  • Şunlar için geçerlidir: Tüm öğeler. SVG, bu dışında muhafaza elemanları için de geçerlidir eleman, tüm grafik elementleri ve elemanının
  • Devralındı: hayır
  • Animasyon türü: tekrarlanabilir liste

Temelde sözdiziminin, bir veya iki uzunluk ve / veya yüzde ( ), olarak ayarlanmış autoveya iki anahtar kelimeden ( coverve contain) biri olabilen bir arka plan boyutu ( ) değerini kabul ettiğini söyler .

  • Zaman iki değer kullanılır, ilk değer belirler genişliği maske görüntü ve ikinci değeri belirtir yüksekliği .
  • Ne zaman bir değer içeren veya kapak değildir kullanıldığında, maske görüntünün genişliğini tanımlar ve yükseklik olduğu varsayılır auto.

Değerler

/* Lengths */ mask-size: 200px; /* width is 200px and height is auto */ mask-size: 50% 100%; /* width is 50% and height is 100% */ 
 /* Keywords */ mask-size: contain; mask-size: cover; 
 /* Global values */ mask-size: auto; mask-size: intial; mask-size: inherit; mask-size: unset;

Değer tanımları

  • : Gibi herhangi bir geçerli ve negatif olmayan CSS uzunluğu px, em, remve %diğerleri.
  • : Değeriyle ayarlanan maske konumlandırma alanına göre yüzde değeri olarak maske katmanı görüntüsünün boyutunu belirtir mask-origin. Varsayılan olarak bu değer, border-boxkutunun kenarlıklarını, dolgusunu ve içeriğini içerdiği anlamına gelir.
  • auto: Maske görüntüsünün gerçek yüksekliği ve genişliği kullanılır ve iç boyutları olmayan degradeler gibi görüntüler için maske konumlandırma alanı boyutunda oluşturulur.
  • contain: Hem genişliği hem de yüksekliği maske konumlandırma alanına sığacak şekilde iç oranını korurken maske görüntüsünü ölçeklendirir. İç boyutları olmayan degradeler gibi görüntüler için maske konumlandırma alanı boyutunda oluşturulur.
  • cover: Hem genişliği hem de yüksekliği maske konumlandırma alanını tamamen kaplayacak şekilde iç oranını korurken maske görüntüsünü ölçeklendirir. İç boyutları olmayan degradeler gibi görüntüler için maske konumlandırma alanı boyutunda oluşturulur.
  • initial: Özelliğin varsayılan ayarı olan auto.
  • inherit: Ebeveynin maske boyutu değerini kabul eder.
  • unset: Öğeden akımı kaldırır mask-size.

Birden çok değer kullanma

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

.element ( mask-image: url(image1.png.webp), url(image2.png.webp), url(image3.png.webp); mask-size: 100px 100%, auto, contain; )

autodeğer

mask-sizeÖzelliğin değeri şu şekilde belirtilirse auto:

.element ( mask-size: auto auto; /* or */ mask-size: auto; )

… Daha sonra maske görüntüsü, en boy oranını korumak için karşılık gelen yönlerde ölçeklenir. Bununla birlikte, görüntünün iç boyutlarına ve oranına bağlı olarak çeşitli sonuçlar alabiliriz.

Oran / Boyut İç boyut yok Tek bir iç boyut Her iki iç boyut
Orantılı Bunun yerine içerme belirtilmiş gibi oluşturuldu Bu boyut ve orantı tarafından belirlenen boyutta işlenir O boyutta oluşturuldu
Oran Yok Maske konumlandırma alanı boyutunda oluşturuldu İç boyut ve maske konumlandırma alanının karşılık gelen boyutu kullanılarak oluşturulur Yok

Değeri mask-sizeile belirtilmişse autove aşağıdaki gibi otomatik olmayan başka bir değer:

.element ( mask-size: auto 200px; )

… sonra:

  • görüntünün içsel bir orantısı varsa , otomatik değer, belirtilen boyut ve iç oran kullanılarak hesaplanır.
  • görüntünün iç oranı yoksa , otomatik değer, varsa görüntünün karşılık gelen iç boyutu olur ve yoksa, otomatik, maske konumlandırma alanının karşılık gelen boyutu olur.

Anlamak covervecontain

Aşağıdaki video, kapsama ve kapsam anahtar kelimelerinin nasıl çalıştığını açıklamaktadır. Bir maske katmanının başlangıç ​​konumunun, konumlandırma alanının merkezinde olduğuna dikkat edin:

Görüntünün iç en boy oranı yoksa, kapak veya içerme belirtilmesi, maske görüntüsünü maske konumlandırma alanı boyutunda işler.

Ve tam olarak içsel bir boyut ve içsel bir oran nedir?

İç boyutlar, bir elemanın genişliği ve yüksekliğidir ve içsel oran, bunların oranıdır.

  • PNG formatı gibi bir bitmap görüntüsü , her zaman kendine özgü boyutlara ve kendine özgü bir orana sahiptir.
  • SVG formatı gibi bir vektör görüntüsü her iki iç boyuta sahip olabilir. Bu nedenle, aynı zamanda içsel bir orana da sahiptir. Aynı zamanda bir iç boyuta sahip olabilir veya hiç olmayabilir ve her iki durumda da içsel bir orantı olabilir veya olmayabilir.
  • Gradyanlar , içsel boyutları veya içsel oranları olmayan görüntüler gibidir.

Tarayıcı desteği

IE Kenar Firefox Krom Safari Opera
Hayır 18+ 53+ Herşey 4+ 70
Android Chrome Android Firefox Android Tarayıcı iOS Safari Opera Mini
85+ 79+ 4.4+ Herşey Herşey
Kaynak: caniuse

Demo

Aşağıdaki demo, maske boyutu için bir uzunluk kullanır. Değeri koddaki diğer değer türleriyle değiştirmeyi deneyin ve sonucu kontrol edin.

Daha fazla bilgi

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