Maskinauha - CSS-temppuja

Anonim

mask-clipCSS omaisuus on osa CSS peittäminen Moduuli Level 1 erittely, ja asettaa maski maalaus alueella. Se leikkaa kirjaimellisesti elementin tausta-alueen ja määrittää, mitkä alueet näkyvät maskin läpi: reunus, täyte tai sisältölaatikko. Se on eräänlainen kuin kehyksen asettaminen valokuvalle, jossa näytetään vain valokuvan osat, joita kehys ei peitä. Vain tässä tapauksessa asetamme sen, mikä leikataan CSS Box Model -arvojen avulla.

.element ( mask-image: url(sun.svg); mask-clip: padding-box; )

Tämä toimii kuten background-clipominaisuus, paitsi että sillä on kolme lisäarvoa, jotka koskevat SVG-elementtejä. Seuraavassa esittelyssä voit muuttaa maskin maalausalueen tällä ominaisuudella. Alla on sama kuva, joka näyttää paremman naamioinnin ja reunan ja pehmustealueiden merkityksen:

Syntaksi

mask-clip: = margin-box | border-box | padding-box | content-box | fill-box | stroke-box | view-box | no-clip
  • Alkuarvo: border-box
  • Koskee kaikkia elementtejä. SVG: ssä se koskee konttielementtejä, lukuun ottamatta elementtiä, kaikkia grafiikkaelementtejä.
  • Peritty: ei
  • Animaation tyyppi: erillinen

Arvot

/* Keyword values */ mask-clip: border-box; mask-clip: content-box; mask-clip: fill-box; mask-clip: margin-box; mask-clip: padding-box; mask-clip: stroke-box; mask-clip: view-box; /* No clip */ mask-clip: no-clip; /* Global values */ mask-clip: intial; mask-clip: inherit; mask-clip: unset;
  • border-box: Maalattu sisältö on leikattu reunuslaatikkoon. (Oletusarvo)
  • content-box: Maalattu sisältö leikataan sisältölaatikkoon.
  • fill-box: Maalattu sisältö on leikattu esineiden rajoituslaatikkoon.
  • margin-box: Maalattu sisältö on leikattu marginaalilaatikkoon.
  • padding-box: Maalattu sisältö on leikattu pehmustelaatikkoon.
  • stroke-box: Maalattu sisältö on leikattu iskunrajoituskoteloon.
  • view-box: Käyttää lähintä SVG-näkymää vertailuruutuna. Jos viewBoxSVG-näkymän luontielementille on määritetty määrite:
    • Viitekenttä on sijoitettu viewBoxattribuutin luoman koordinaattijärjestelmän lähtöpaikkaan .
    • Viitekentän ulottuvuus on määritetty attribuutin widthja heightarvoihin viewBox.
  • no-clip: Maalattua sisältöä ei ole leikattu.
  • initial: Asettaa kiinteistön oletusasetuksen, joka on border-box.
  • inherit: Hyväksyy mask-clipvanhemman arvon.
  • unset: Poistaa virran mask-clipelementistä.

Huomautuksia

  • SVG elementtejä mahdollisesti siihen liittyvä CSS layout ruutuun arvot content-box, padding-boxCompute fill-boxsekä border-boxja margin-boxCompute stroke-box.
  • Elementtien niihin liittyvien CSS layout laatikko, arvot fill-boxlaskea ja content-boxja stroke-boxja view-boxlaskea alkuperäiseen arvoon mask-clip, joka on border-box.

Useiden arvojen käyttö

Tämä ominaisuus voi ottaa pilkulla erotetun arvoluettelon maskileikkeille, ja jokainen arvo lisätään vastaavaan mask-imageominaisuudessa määritettyyn maskikerroksen kuvaan . Seuraavassa esimerkissä ensimmäinen arvo määrittelee ensimmäisen kuvan naamioinnin alueen, toinen arvo määrittää toisen kuvan naamion maalauksen alueen ja niin edelleen.

.element ( mask-image: url(image1.png.webp), url(image2.png.webp), url(image3.png.webp); mask-clip: padding-box, border-box, content-box; )

Demo

Selaimen tuki

IE Reuna Firefox Kromi Safari Ooppera
Ei 79+ 53+ Kaikki 4+ 15+
Android Chrome Android Firefox Android-selain iOS Safari Opera Mobile
Kaikki Kaikki Kaikki Kaikki 59+
Lähde: caniuse

Lisää tietoa

Artikkeli 6. marraskuuta 2016

Leikkaaminen ja peittäminen CSS: ssä

Mojtaba Seyedi