Saiz topeng - Trik CSS

Anonim

Dalam CSS, sifat ukuran topeng menentukan ukuran gambar lapisan topeng. Dalam banyak cara, ia berfungsi seperti background-sizeharta tanah

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

Penyamaran membolehkan anda memaparkan bahagian elemen yang dipilih sambil menyembunyikan yang lain. Ukuran topeng ditentukan oleh mask-sizeharta benda.

Dalam demo berikut, anda boleh bermain-main dengan ukuran gambar lapisan topeng:

Sintaks

mask-size: = ( = | | auto )(1,2) | cover | contain
  • Nilai awal: automatik
  • Berlaku untuk: Semua elemen. Dalam SVG, ia berlaku untuk elemen kontena tidak termasuk elemen, semua elemen grafik dan elemen
  • Diwarisi: tidak
  • Jenis animasi: senarai berulang

Itu pada dasarnya mengatakan bahawa sintaks menerima nilai ukuran latar belakang ( ) yang boleh menjadi satu atau dua panjang dan / atau peratusan ( ), ditetapkan ke auto, atau salah satu daripada dua kata kunci ( coverdan contain).

  • Apabila dua nilai digunakan, nilai pertama menentukan lebar gambar topeng, dan nilai kedua menentukan ketinggiannya .
  • Apabila satu nilai yang tidak berisi atau penutup digunakan, ia menentukan lebar gambar topeng dan ketinggiannya dianggap 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

  • : Mana-mana Panjang CSS sah dan bukan negatif, seperti px, em, remdan %, antara lain.
  • : Menentukan ukuran gambar lapisan topeng sebagai nilai peratusan relatif terhadap kawasan posisi topeng, yang ditetapkan oleh nilai mask-origin. Secara lalai, nilai ini border-box, yang bermaksud mengandungi batas, padding dan isi kotak.
  • auto: Ketinggian dan lebar gambar topeng intrinsik digunakan dan, untuk gambar seperti kecerunan yang tidak mempunyai dimensi intrinsik, gambar diberikan pada ukuran kawasan kedudukan topeng.
  • contain: Menimbang gambar topeng sambil mengekalkan bahagian intrinsiknya dengan cara lebar dan ketinggiannya dapat masuk ke dalam kawasan penentuan topeng. Untuk gambar seperti kecerunan yang tidak mempunyai dimensi intrinsik, gambar diberikan pada ukuran kawasan kedudukan topeng.
  • cover: Menskalakan gambar topeng sambil mengekalkan bahagian intrinsiknya dengan cara lebar dan ketinggiannya dapat sepenuhnya menutupi kawasan kedudukan topeng. Untuk gambar seperti kecerunan yang tidak mempunyai dimensi intrinsik, gambar diberikan pada ukuran kawasan kedudukan topeng.
  • initial: Terpakai tetapan lalai hartanah, yang adalah auto.
  • inherit: Mengamalkan nilai ukuran topeng ibu bapa.
  • unset: Mengeluarkan arus mask-sizedari elemen.

Menggunakan pelbagai nilai

Properti ini dapat mengambil senarai nilai yang dipisahkan koma untuk ukuran topeng dan setiap nilai diterapkan pada gambar lapisan topeng yang sesuai 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; )

yang autonilai

Sekiranya nilai mask-sizeharta tanah dinyatakan sebagai auto, seperti ini:

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

... kemudian gambar topeng ditimbang ke arah yang sesuai untuk mengekalkan nisbah aspeknya. Oleh itu, kita dapat memperoleh pelbagai hasil bergantung pada dimensi dan perkadaran intrinsik gambar.

Perkadaran / Dimensi Tiada dimensi intrinsik Satu dimensi intrinsik Kedua-dua dimensi intrinsik
Mempunyai Perkadaran Diberi seolah-olah mengandungi telah ditentukan sebagai gantinya Diberi pada ukuran yang ditentukan oleh satu dimensi dan bahagiannya Diberi pada ukuran itu
Tiada Perkadaran Diberi pada ukuran kawasan kedudukan topeng Diberi menggunakan dimensi intrinsik dan dimensi yang sesuai dari kawasan kedudukan topeng N / A

Sekiranya nilai mask-sizeditentukan dengan autodan nilai bukan automatik lain seperti berikut:

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

... kemudian:

  • jika gambar mempunyai bahagian intrinsik , nilai automatik dihitung menggunakan dimensi yang ditentukan dan bahagian intrinsik.
  • jika gambar tidak mempunyai perkadaran intrinsik , nilai automatik menjadi dimensi intrinsik gambar yang sesuai jika ada dan, jika tidak, automatik akan menjadi dimensi yang sesuai dari kawasan kedudukan topeng.

Memahami coverdancontain

Video berikut menerangkan bagaimana kata kunci mengandungi dan penutup berfungsi. Perhatikan bahawa kedudukan awal lapisan topeng berada di tengah-tengah kawasan kedudukan:

Sekiranya gambar tidak mempunyai nisbah aspek intrinsik, maka tentukan salah satu penutup atau isi menjadikan gambar topeng pada ukuran kawasan kedudukan topeng.

Dan apa sebenarnya dimensi intrinsik dan bahagian intrinsik?

Dimensi intrinsik adalah lebar dan tinggi elemen dan bahagian intrinsik adalah nisbahnya.

  • Imej bitmap seperti format PNG, selalu mempunyai dimensi intrinsik dan bahagian intrinsik.
  • Imej vektor seperti format SVG, mungkin mempunyai kedua-dua dimensi intrinsik. Oleh itu, ia juga mempunyai bahagian intrinsik. Ini juga mungkin mempunyai satu atau tidak dimensi intrinsik dan, dalam kedua-dua kes, mungkin atau tidak mempunyai bahagian intrinsik.
  • Kecerunan seperti gambar tanpa dimensi intrinsik atau bahagian intrinsik.

Sokongan penyemak imbas

IE Hujung Firefox Chrome Safari Opera
Tidak 18+ 53+ Semua 4+ 70
Android Chrome Android Firefox Penyemak Imbas Android Safari iOS Opera Mini
85+ 79+ 4.4+ Semua Semua
Sumber: caniuse

Demo

Demo berikut menggunakan panjang untuk ukuran topeng. Cuba ubah nilai ke jenis nilai lain dalam kod dan periksa hasilnya.

Maklumat lanjut

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