Maske kökenli - CSS Hileleri

mask-originBir maske katmanı görüntünün maske pozisyon alanını belirler. Başka bir deyişle, maske katmanı görüntüsünün başlangıç noktasının, sınırın kenarı, dolgu veya içerik kutusu olup olmadığını tanımlar.

.element ( mask-image: url(star.svg); mask-origin: content-box; )

Tek bir kutu olarak oluşturulan öğeler mask-originiçin maske konumlandırma alanını belirtir. Çoklu kutular olarak oluşturulan elemanlar için (örneğin, birkaç satırdaki satır içi kutular, birkaç sayfadaki kutular) özellik box-decoration-break, maske konumlandırma alanını belirlemek için hangi kutuların çalıştığını belirtir .

Bu özellik, background-originözellik gibi çalışır , ancak farklı başlangıç değerine ve SVG öğeleri için geçerli olan üç ek değere sahiptir.

Aşağıdaki demoda, maske katmanı görüntüsünün başlangıcı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-origin: = content-box | padding-box | border-box | margin-box | fill-box | stroke-box | view-box

Başlangıç değeri: border-box
Şunlar için geçerlidir: Tüm öğeler. SVG'de, öğe, tüm grafik öğeleri ve öğe dışındaki kap öğeleri için geçerlidir .
Devralındı: hayır
Animasyon türü: ayrık

Değerler

/* Keywords */ mask-origin: content-box; mask-origin: padding-box; mask-origin: border-box; mask-origin: margin-box; mask-origin: fill-box; mask-origin: stroke-box; mask-origin: view-box;   /* Global values */ mask-origin: intial; mask-origin: inherit; mask-origin: unset;

Değer tanımları

content-box: Konum, içerik kutusuna göre değişir. Başlangıç noktası mask-image, içerik kenarının sol üst köşesine yerleştirilir.
padding-box: Konum, dolgu kutusuna göre değişir. Maske görüntüsünün başlangıç 0 0noktası dolgu kenarının sol üst köşesinde, 100% 100%sağ alt köşedir.
border-box: Konumu sınır kutusuna göre ayarlayan varsayılan değer.
margin-box: Konum, kenar boşluğuna göre değişir
fill-box: Konum, nesne sınırlama kutusuna göre değişir
stroke-box: Konum, kontur sınırlama kutusuna görelidir
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 belirtilirse, referans kutusu viewBoxöznitelik tarafından oluşturulan koordinat sisteminin başlangıcına konumlandırılır ve referans kutusunun boyutu özniteliğin widthve heightdeğerlerine ayarlanır viewBox.
initial: Özelliğin varsayılan ayarını uygular;border-box
inherit:mask-origin Ebeveynin değerini benimser .
unset: Öğeden akımı kaldırır mask-origin.

Birden çok değer kullanma

Bu özellik, maske kaynakları için virgülle ayrılmış bir değerler listesi alabilir; burada 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, ilk değer ilk görüntünün başlangıcını, ikinci değer ikinci görüntünün başlangıcını belirtir ve bu böyle devam eder.

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

Notlar

İlişkili CSS yerleşim kutusunda, değerler olmadan SVG öğeleri için content-box, padding-boxve border-boxhiç bilgi işlem fill-box.
İlgili CSS yerleşim kutusu, değerlerle elemanları için fill-box, stroke-boxve view-boxkarşı bilgi işlem initialdeğeri mask-originolan, border-box.

Demo

Maske katmanı görüntüsünü tekrarladığımızda, ilk örnek belirtilen konumlandırma alanının sol üst köşesine yerleştirilir ve ardından mask-repeatözelliğin değerine göre oradan başlayarak tekrarlanır .

mask-originNeler olduğu hakkında daha iyi bir fikir edinmek için aşağıdaki demodaki değerini değiştirin :