Kedudukan topeng - Trik CSS

Anonim

Dalam CSS, mask-positionproperti menentukan kedudukan awal gambar lapisan topeng berbanding dengan kawasan kedudukan topeng. Ia berfungsi seperti background-positionharta tanah.

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

Penyamaran membolehkan anda memaparkan bahagian elemen yang dipilih sambil menyembunyikan yang lain. Dalam demo berikut, anda boleh mengubah kedudukan gambar lapisan topeng:

Sintaks

mask-position: = ( ( left | center | right ) || ( top | center | bottom ) | ( left | center | right | ) ( top | center | bottom | )? | ( ( left | right ) ) && ( ( top | bottom ) ) )
  • Nilai awal: 0% 0%
  • Berlaku untuk: semua elemen. Dalam SVG, ia berlaku untuk elemen kontena tidak termasuk elemen, semua elemen grafik dan elemen.
  • Diwarisi: tidak
  • Nilai dikira: terdiri daripada: dua kata kunci yang mewakili asal dan dua ofset dari asal itu, masing-masing diberikan sebagai panjang mutlak (jika diberi a ), sebaliknya sebagai peratusan.
  • Jenis animasi: senarai berulang

Nilai

A boleh dinyatakan dari segi kata kunci mengimbangi ( top, left, bottom, right, dan center), peratusan, dan nilai-nilai panjang mengenai tepi unsur, serupa dengan CSS background-positionharta.

/* 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;

Definisi nilai

  • : Mana-mana sah panjang CSS (seperti px, em, remdan %, antara lain) yang akan menentukan sejauh mana pinggir imej topeng adalah dari tepi yang sepadan unsur.
  • : Menentukan kedudukan gambar lapisan topeng sebagai nilai peratusan relatif terhadap kawasan kedudukan topeng tolak ukuran gambar topeng.
  • top: Setara dengan 0% untuk kedudukan menegak.
  • right: Setara dengan 100% untuk kedudukan mendatar.
  • bottom: Setara dengan 100% untuk kedudukan menegak.
  • left: Setara dengan 0% untuk kedudukan mendatar.
  • center: Setara dengan 50% untuk kedudukan mendatar jika kedudukan mendatar tidak dinyatakan sebaliknya, atau 50% untuk kedudukan menegak, jika ada.
  • initial: Menerapkan tetapan lalai harta tanah, iaitu 0% 0%.
  • inherit: Mengamalkan mask-positionnilai ibu bapa.
  • unset: Mengeluarkan arus mask-positiondari elemen.

Menggunakan pelbagai nilai

Properti ini dapat mengambil senarai nilai yang dipisahkan koma untuk posisi topeng dan setiap nilai diterapkan pada gambar lapisan topeng yang sesuai yang ditentukan dalam mask-imageproperti. Dalam contoh berikut, nilai pertama menentukan kedudukan gambar pertama, nilai kedua menentukan kedudukan gambar kedua, dan seterusnya.

.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; )

Sintaks yang berbeza

mask-position boleh mengambil satu, dua, tiga atau empat nilai untuk menentukan kedudukan lapisan topeng secara mendatar dan menegak.

Nilai tunggal

Sekiranya satu nilai ditetapkan, ia diambil sebagai nilai mendatar dan nilai menegak dianggap center.

mask-position: 100px; /* 100px center */
Dua nilai

Sekiranya menggunakan nilai pasangan, yang pertama diambil sebagai nilai mendatar, dan yang kedua menentukan kedudukan lapisan membuat secara menegak.

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

Sekiranya kedua-dua nilai adalah kata kunci, urutan kata kunci tidak relevan:

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

Tetapi apabila kita mempunyai gabungan kata kunci dan panjang atau peratusan, pesanan itu penting dan nilai pertama selalu sesuai dengan ofset mendatar. Oleh itu:

mask-position: 50% right; /* = horizontal center, vertical right */ mask-position: right 50%; /* = horizontal right, vertical center */
Tiga nilai

Sekiranya tiga nilai diberikan, ofset yang hilang dianggap sifar:

mask-position: left 100px bottom; /* left=100px bottom=0 */
Empat nilai

Sintaks empat nilai membolehkan anda menentukan sisi elemen mana anda meletakkan topeng relatif (nilai 1 dan 3), dan kemudian jarak dari sisi tersebut (nilai 2 dan 4).

Jadi, jika anda mahu meletakkan topeng 100px dari bahagian bawah elemen, dan 200px dari kanan, anda boleh melakukan seperti berikut:

mask-position: bottom 100px right 200px;

Topeng animasi

Ada kemungkinan untuk menghidupkan kedudukan topeng dan mask-sizemenggunakan animasi bingkai utama dan peralihan CSS, seperti yang berikut:

.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; )

Dalam demo seterusnya, kami menganimasikan kedudukan lapisan topeng menggunakan animasi bingkai utama:

Demo

Tukar nilai untuk mask-positiondalam demo berikut:

Sokongan penyemak imbas

IE Hujung Firefox Chrome Safari Opera
Tidak 18+ 53+ 4+ 3.2+ 15+
Android Chrome Android Firefox Penyemak Imbas Android Safari iOS Opera Mudah Alih
85+ 79+ 2.1+ 3.2+ 59+
Sumber: caniuse

Maklumat lanjut

  • Modul CSS Masking Tahap 1 (Draf Editor)
  • Keratan dan Penyamaran dalam CSS
  • Keratan vs Penutup: Bilakah Masing-masing Digunakan
  • # 185: Bermain dengan Topeng CSS (video)