Posisi topeng - Trik CSS

Anonim

Di CSS, mask-positionproperti menentukan posisi awal gambar lapisan topeng relatif terhadap area posisi topeng. Ini berfungsi seperti background-positionproperti.

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

Masking memungkinkan Anda untuk menampilkan bagian elemen yang dipilih sambil menyembunyikan sisanya. Dalam demo berikut, Anda dapat mengubah posisi gambar lapisan topeng:

Sintaksis

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, ini berlaku untuk elemen kontainer tidak termasuk elemen, semua elemen grafik dan elemen.
  • Diwariskan: tidak
  • Nilai yang dihitung: terdiri dari: dua kata kunci yang mewakili asal dan dua offset dari asal tersebut, masing-masing diberikan sebagai panjang absolut (jika diberi a ), sebaliknya sebagai persentase.
  • Jenis animasi: daftar berulang

Nilai

Sebuah dapat ditentukan dari segi kata kunci offset ( top, left, bottom, right, dan center), persentase, dan nilai-nilai panjang mengenai tepi elemen, mirip dengan CSS background-positionproperti.

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

  • : Apa saja Panjang CSS valid (seperti px, em, remdan %, antara lain) yang akan menentukan seberapa jauh tepi gambar topeng adalah dari tepi yang sesuai dari elemen.
  • : Menentukan posisi gambar lapisan topeng sebagai nilai persentase relatif terhadap area pemosisian topeng dikurangi ukuran gambar topeng.
  • top: Setara dengan 0% untuk posisi vertikal.
  • right: Setara dengan 100% untuk posisi horizontal.
  • bottom: Setara dengan 100% untuk posisi vertikal.
  • left: Setara dengan 0% untuk posisi horizontal.
  • center: Setara dengan 50% untuk posisi horizontal jika posisi horizontal tidak ditentukan lain, atau 50% untuk posisi vertikal, jika ada.
  • initial: Menerapkan pengaturan default properti, yaitu 0% 0%.
  • inherit: Mengadopsi mask-positionnilai induk.
  • unset: Menghapus arus mask-positiondari elemen.

Menggunakan banyak nilai

Properti ini dapat mengambil daftar nilai yang dipisahkan koma untuk posisi topeng dan setiap nilai diterapkan ke gambar lapisan topeng terkait yang ditentukan dalam mask-imageproperti. Dalam contoh berikut, nilai pertama menentukan posisi gambar pertama, nilai kedua menentukan posisi 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 berbeda

mask-position dapat mengambil satu, dua, tiga atau empat nilai untuk menentukan posisi lapisan topeng secara horizontal dan vertikal.

Nilai tunggal

Dalam hal satu nilai ditetapkan, itu dianggap sebagai nilai horizontal dan nilai vertikal dianggap center.

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

Jika menggunakan nilai pasangan, nilai pertama diambil sebagai nilai horizontal, dan nilai kedua menentukan posisi lapisan make secara vertikal.

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

Jika kedua nilai adalah kata kunci, maka urutan kata kuncinya tidak relevan:

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

Tetapi bila kami memiliki kombinasi kata kunci dan panjang atau persentase, urutannya penting dan nilai pertama selalu sesuai dengan offset horizontal. Karena itu:

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

Jika tiga nilai diberikan, offset yang hilang dianggap nol:

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

Sintaks empat nilai memungkinkan Anda menentukan sisi mana dari elemen yang Anda posisikan mask relatifnya (nilai 1 dan 3), dan kemudian jarak dari sisi tersebut (nilai 2 dan 4).

Jadi, jika Anda ingin memposisikan mask 100px dari bawah elemen, dan 200px dari kanan, Anda dapat melakukan seperti berikut:

mask-position: bottom 100px right 200px;

Topeng animasi

Dimungkinkan untuk menganimasikan mask-position dan mask-sizemenggunakan animasi keyframe dan transisi CSS, seperti 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 berikutnya ini, kami menganimasikan posisi lapisan topeng menggunakan animasi bingkai utama:

Demo

Ubah nilainya mask-positiondi demo berikut:

Dukungan browser

YAITU Tepi Firefox Chrome Safari Opera
Tidak 18+ 53+ 4+ 3.2+ 15+
Android Chrome Android Firefox Browser Android iOS Safari Opera Mobile
85+ 79+ 2.1+ 3.2+ 59+
Sumber: caniuse

Informasi lebih lanjut

  • Modul Masking CSS Level 1 (Draf Editor)
  • Clipping dan Masking di CSS
  • Clipping vs. Masking: Kapan Menggunakan Masing-masing
  • # 185: Bermain dengan CSS Masks (video)