Naamion koko - CSS-temppuja

Anonim

CSS: ssä mask-size -ominaisuus määrittää maskikerroksen kuvan koon. Monin tavoin se toimii hyvin samoin kuin background-sizeomaisuus.

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

Peittäminen antaa sinun näyttää elementin valitut osat piilottaen loput. mask-sizeOminaisuus määrittää maskin koon .

Seuraavassa esittelyssä voit leikkiä maskikerroksen kuvan koon kanssa:

Syntaksi

mask-size: = ( = | | auto )(1,2) | cover | contain
  • Alkuarvo: auto
  • Koskee kaikkia elementtejä. SVG: ssä se koskee konttielementtejä, lukuun ottamatta elementtiä, kaikkia grafiikkaelementtejä ja elementtiä
  • Peritty: ei
  • Animaation tyyppi: toistettava luettelo

Periaatteessa sanotaan, että syntaksissa hyväksytään taustakoko ( ) -arvo, joka voi olla joko yksi tai kaksi pituutta ja / tai prosenttiosuutta ( ), asetettu autotai yksi kahdesta avainsanasta ( coverja contain).

  • Kun käytetään kahta arvoa , ensimmäinen arvo määrittää maskin kuvan leveyden ja toinen arvo sen korkeuden .
  • Kun käytetään yhtä arvoa, joka ei sisällä tai peitä, se määrittää maskin kuvan leveyden ja korkeuden oletetaan olevan auto.

Arvot

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

Arvomääritelmät

  • : Mikä tahansa kelvollinen ja ei-negatiivinen CSS pituus, kuten px, em, remja %muun muassa.
  • : Määrittää maskikerroskuvan koon prosenttiosuutena suhteessa maskin sijoitusalueeseen, jonka määrittää arvo mask-origin. Oletusarvoisesti tämä arvo border-boxtarkoittaa, että se sisältää reunat, täytteen ja laatikon sisällön.
  • auto: Käytetään maskin kuvan sisäistä korkeutta ja leveyttä, ja sellaisille kuville kuin kaltevuudet, joilla ei ole sisäisiä mittoja, se renderoidaan maskin sijoitusalueen kokoon.
  • contain: Skaalaa maskin kuvan säilyttäen sen sisäisen osuuden siten, että sekä leveys että korkeus sopivat maskin sijoitusalueen sisään. Sellaisille kuville kuin kaltevuudet, joilla ei ole sisäisiä mittoja, se renderöidään maskin sijoitusalueen kokoon.
  • cover: Skaalaa maskin kuvan säilyttäen sen sisäisen osuuden siten, että sekä leveys että korkeus voivat peittää maskin sijoitusalueen kokonaan. Sellaisille kuville kuin kaltevuudet, joilla ei ole sisäisiä mittoja, se renderöidään maskin sijoitusalueen kokoon.
  • initial: Asettaa kiinteistön oletusasetuksen, joka on auto.
  • inherit: Hyväksyy vanhemman maskin koon arvon.
  • unset: Poistaa virran mask-sizeelementistä.

Useiden arvojen käyttö

Tämä ominaisuus voi ottaa pilkulla erotetun luettelon maskikokojen arvoista, ja kukin arvo lisätään vastaavaan mask-imageominaisuudessa määritettyyn maskikerroksen kuvaan .

Seuraavassa esimerkissä ensimmäinen arvo määrittää ensimmäisen kuvan koon, toinen arvo määrittää toisen kuvan koon ja niin edelleen.

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

autoarvo

Jos mask-sizeominaisuuden arvoksi määritetään autonäin:

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

… Sitten maskikuva skaalautuu vastaaviin suuntiin, jotta sen kuvasuhde säilyy. Tästä huolimatta voimme saada erilaisia ​​tuloksia kuvan sisäisistä mitoista ja suhteesta riippuen.

Suhde / ulottuvuus Ei sisäisiä mittoja Yksi sisäinen ulottuvuus Molemmat sisäiset ulottuvuudet
Onko osuus Lajiteltu ikään kuin sisältö olisi määritetty sen sijaan Lajitellaan koon mukaan, jonka yksi ulottuvuus ja osuus määrittävät Lajitellaan tässä koossa
Ei osuutta Lasketaan maskin sijoitusalueen koon mukaan Lajitellaan käyttämällä sisäistä ulottuvuutta ja maskin sijoitusalueen vastaavaa ulottuvuutta N / A

Jos arvo mask-sizeon määritetty autoja jokin muu ei-automaattinen arvo, kuten seuraava:

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

… Sitten:

  • jos kuvalla on luonnostaan ​​suhde , automaattinen arvo lasketaan käyttämällä määritettyä ulottuvuutta ja sisäistä osuutta.
  • jos kuvalla ei ole sisäistä osuutta , automaattisesta arvosta tulee kuvan vastaava sisäinen ulottuvuus, jos se on olemassa, ja jos sitä ei ole, auto on maskin sijoitusalueen vastaava ulottuvuus.

Ymmärtäminen coverjacontain

Seuraava video selittää, miten sisältävät ja peittävät avainsanat toimivat. Huomaa, että maskikerroksen alkuasento on paikannusalueen keskellä:

Jos kuvalla ei ole sisäistä kuvasuhdetta, joko kannen tai sisällön määrittäminen tekee maskista kuvan maskin sijoitusalueen kokoiseksi.

Ja mikä helvetti on sisäinen ulottuvuus ja sisäinen osuus?

Sisäiset mitat ovat elementin leveys ja korkeus ja sisäinen osuus on niiden suhde.

  • Bittikarttakuvalla, joka on kuin PNG-muoto, on aina sisäinen ulottuvuus ja sisäinen osuus.
  • Vektorikuvalla, kuten SVG-muoto, voi olla molemmat sisäiset mitat. Siksi sillä on myös luontainen osuus. Sillä voi myös olla yksi olematon ulottuvuus tai ei sitä, ja kummassakin tapauksessa sillä voi olla tai ei olla sisäistä osuutta.
  • Kaltevuudet ovat kuin kuvat, joilla ei ole sisäisiä ulottuvuuksia tai sisäistä osuutta.

Selaimen tuki

IE Reuna Firefox Kromi Safari Ooppera
Ei 18+ 53+ Kaikki 4+ 70
Android Chrome Android Firefox Android-selain iOS Safari ooppera Mini
85+ 79+ 4.4+ Kaikki Kaikki
Lähde: caniuse

Demo

Seuraava esittely käyttää maskin koon pituutta. Yritä muuttaa arvo muuntyyppisiin arvoihin koodissa ja tarkista tulos.

Lisää tietoa

  • CSS-peitemoduuli, taso 1
  • Leikkaaminen ja peittäminen CSS: ssä
  • Leikkaus vs. peittäminen: milloin niitä käytetään
  • # 185: CSS-naamareilla pelaaminen (video)