Ukuran topeng - Trik CSS

Anonim

Di CSS, properti ukuran topeng menentukan ukuran gambar lapisan topeng. Dalam banyak hal, cara kerjanya sangat mirip dengan background-sizeproperti.

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

Masking memungkinkan Anda untuk menampilkan bagian elemen yang dipilih sambil menyembunyikan sisanya. Ukuran topeng ditentukan oleh mask-sizeproperti.

Dalam demo berikut Anda bisa bermain-main dengan ukuran gambar lapisan topeng:

Sintaksis

mask-size: = ( = | | auto )(1,2) | cover | contain
  • Nilai awal: auto
  • Berlaku untuk: Semua elemen. Dalam SVG, ini berlaku untuk elemen kontainer tidak termasuk elemen, semua elemen grafis dan elemen
  • Diwariskan: tidak
  • Jenis animasi: daftar berulang

Itu pada dasarnya mengatakan bahwa sintaks menerima nilai ukuran latar belakang ( ) yang bisa berupa satu atau dua panjang dan / atau persentase ( ), disetel ke auto, atau salah satu dari dua kata kunci ( coverdan contain).

  • Jika dua nilai digunakan, nilai pertama menentukan lebar gambar topeng, dan nilai kedua menentukan tingginya .
  • Ketika satu nilai yang tidak mengandung atau menutupi digunakan, itu menentukan lebar dari gambar topeng dan tingginya diasumsikan auto.

Nilai

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

Definisi nilai

  • : Apa saja Panjang CSS yang valid dan non-negatif, seperti px, em, remdan %, antara lain.
  • : Menentukan ukuran gambar lapisan topeng sebagai nilai persentase relatif terhadap area pemosisian topeng, yang ditetapkan oleh nilai mask-origin. Secara default, nilai ini adalah border-box, artinya berisi batas, pengisi, dan konten kotak.
  • auto: Tinggi dan lebar intrinsik gambar topeng digunakan dan, untuk gambar seperti gradien yang tidak memiliki dimensi intrinsik, ini dirender pada ukuran area pemosisian topeng.
  • contain: Mengubah ukuran gambar topeng sambil mempertahankan proporsi intrinsiknya sedemikian rupa sehingga lebar dan tingginya dapat masuk ke dalam area pemosisian topeng. Untuk gambar seperti gradien yang tidak memiliki dimensi intrinsik, itu dirender pada ukuran area pemosisian topeng.
  • cover: Mengubah ukuran gambar topeng sambil mempertahankan proporsi intrinsiknya sedemikian rupa sehingga lebar dan tingginya dapat menutupi sepenuhnya area pemosisian topeng. Untuk gambar seperti gradien yang tidak memiliki dimensi intrinsik, itu dirender pada ukuran area pemosisian topeng.
  • initial: Menerapkan pengaturan default properti, yaitu auto.
  • inherit: Mengadopsi nilai ukuran topeng dari induk.
  • unset: Menghapus arus mask-sizedari elemen.

Menggunakan banyak nilai

Properti ini dapat mengambil daftar nilai yang dipisahkan koma untuk ukuran topeng dan setiap nilai diterapkan ke gambar lapisan topeng terkait yang ditentukan dalam mask-imageproperti.

Dalam contoh berikut, nilai pertama menentukan ukuran gambar pertama, nilai kedua menentukan ukuran gambar kedua, dan seterusnya.

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

The autonilai

Jika nilai mask-sizeproperti ditentukan autoseperti ini:

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

… Kemudian gambar topeng diskalakan ke arah yang sesuai untuk mempertahankan rasio aspeknya. Meskipun demikian, kita bisa mendapatkan berbagai hasil tergantung pada dimensi dan proporsi intrinsik gambar.

Proporsi / Dimensi Tidak ada dimensi intrinsik Satu dimensi intrinsik Keduanya memiliki dimensi intrinsik
Memiliki Proporsi Alih-alih, dirender seolah-olah berisi telah ditentukan Diberikan pada ukuran yang ditentukan oleh satu dimensi dan proporsinya Diberikan pada ukuran itu
Tidak Ada Proporsi Diberikan pada ukuran area pemosisian topeng Diberikan menggunakan dimensi intrinsik dan dimensi yang sesuai dari area pemosisian topeng T / A

Jika nilai mask-sizeditentukan dengan autodan nilai non-otomatis lainnya seperti berikut:

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

… kemudian:

  • jika gambar memiliki proporsi intrinsik , nilai otomatis dihitung menggunakan dimensi yang ditentukan dan proporsi intrinsik.
  • jika gambar tidak memiliki proporsi intrinsik , nilai otomatis menjadi dimensi intrinsik terkait gambar jika ada dan, jika tidak, otomatis akan menjadi dimensi yang sesuai dari area pemosisian topeng.

Memahami coverdancontain

Video berikut menjelaskan cara kerja kata kunci berisi dan penutup. Perhatikan bahwa posisi awal lapisan topeng berada di tengah area pemosisian:

Jika gambar tidak memiliki rasio aspek intrinsik, maka menentukan sampul atau berisi akan merender gambar topeng pada ukuran area pemosisian topeng.

Dan apakah sebenarnya dimensi intrinsik dan proporsi intrinsik itu?

Dimensi intrinsik adalah lebar dan tinggi suatu elemen dan proporsi intrinsik adalah perbandingannya.

  • Gambar bitmap seperti format PNG, selalu memiliki dimensi intrinsik dan proporsi intrinsik.
  • Gambar vektor seperti format SVG, mungkin memiliki kedua dimensi intrinsik. Oleh karena itu, ia juga memiliki proporsi intrinsik. Ini juga mungkin memiliki satu atau tidak ada dimensi intrinsik dan, dalam kedua kasus, itu mungkin atau mungkin tidak memiliki proporsi intrinsik.
  • Gradien seperti gambar tanpa dimensi intrinsik atau proporsi intrinsik.

Dukungan browser

YAITU Tepi Firefox Chrome Safari Opera
Tidak 18+ 53+ Semua 4+ 70
Android Chrome Android Firefox Browser Android iOS Safari Opera Mini
85+ 79+ 4.4+ Semua Semua
Sumber: caniuse

Demo

Demo berikut menggunakan panjang untuk ukuran topeng. Coba ubah nilainya ke jenis nilai lain dalam kode dan periksa hasilnya.

Informasi lebih lanjut

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