Sök…


Syntax

  • Klippning
  • klippväg: <klippkälla> | [<basisk-form> || <clip-geometry-box>] | ingen
  • maskering
  • mask-image: [none | <mask -reference>] #
  • mask-mode: [<mask -mode>] #
  • mask-repetera: [<repetera-stil] #
  • mask-position: [<position>] #
  • mask-klipp: [<geometry-box> | no-klipp] #
  • mask-origin: [<geometry-box>] #
  • maskstorlek: [<bg- storlek>] #
  • mask-komposit: [<kompositerande operatör>] #
  • mask: [<mask -reference> <masking -ode>? || <position> [/ <bg- storlek>]? || <repeat-style> || <geometrybox> || [<geometrybox> | no-clip] || <compositing-operator>] #

parametrar

Parameter detaljer
clip-källa En URL som kan peka på ett inline SVG-element (eller) ett SVG-element i en extern fil som innehåller klippvägens definition.
basic-form Avser en bland inset() , circle() , ellipse() eller polygon() . Med hjälp av en av dessa funktioner definieras klippvägen. Dessa formfunktioner fungerar exakt på samma sätt som de gör i Shapes for Floats
clip-geometri-box Detta kan ha en bland content-box , padding-box , border-box , margin-box , fill-box , stroke-box , view-box som värden. När detta tillhandahålls utan värde för <basisk-form>, används kanterna på motsvarande ruta som sökväg för klippning. När det används med en <basisk form>, fungerar detta som referensrutan för formen.
mask-referens Detta kan vara none eller en bild eller en referens-URL till en bildkälla för mask.
upprepad stil Detta anger hur masken ska upprepas eller kaklas i X- och Y-axlarna. De stödda värdena är repeat-x , repeat-y , repeat , space , round , no-repeat .
mask-mode Kan vara alpha eller luminance eller auto och indikerar om masken ska behandlas som en alfamask eller en luminansmask. Om inget värde tillhandahålls och maskreferensen är en direkt bild, skulle den betraktas som alfamask (eller) om maskreferensen är en URL, skulle den betraktas som luminansmask.
placera Detta anger positionen för varje maskskikt och liknar beteende som background-position . Värdet kan tillhandahållas i syntax med 1 värde (som top , 10% ) eller i syntax med två värden (som top right , 50% 50% ).
geometri-box Detta anger den ruta som masken ska klippas till ( maskmålningsområdet ) eller rutan som ska användas som referens för maskens ursprung ( maskpositioneringsområdet ) beroende på egenskapen. Listan över möjliga värden är content-box , padding-box , border-box , margin-box , fill-box , stroke-box , view-box . Detaljerad förklaring av hur var och en av dessa värden fungerar finns i W3C Spec .
bg-storlek Detta representerar storleken på varje maskbild-lager och har samma syntax som background-size . Värdet kan vara längd eller procent eller auto eller täcka eller innehålla. Längd, procent och auto kan antingen tillhandahållas som ett enda värde eller som ett för varje axel.
compositing-operatör Detta kan vara vilken som helst bland add , subtract , exclude , multiply per skikt och definierar typen av kompositionsoperation som ska användas för detta skikt med de under det. Detaljerad förklaring om varje värde finns i W3C-specifikationerna .

Anmärkningar

CSS Clipping and Masking är mycket nya koncept och webbläsarsupport för dessa egenskaper är ganska lågt.

masker:

Som i skrivande stund (16 ') stöder Chrome, Safari och Opera dessa egenskaper med -webkit- prefixet.

Firefox kräver inte prefix men det stöder masker endast när den används med SVG mask För inline SVG mask element, är syntaxen mask: url(#msk) medan för att använda mask i en extern SVG-fil syntaxen är mask: url('yourfilepath/yourfilename.svg#msk') . #msk i båda fallen hänför sig till id av mask som håller på att hänvisas till. Som anges i detta svar stöder Firefox för närvarande inte någon annan parameter än mask-reference i mask .

Internet Explorer (och Edge) erbjuder inget stöd för den här egenskapen än.

Den mask-mode egenskapen för närvarande inte stöds av alla webbläsare med eller utan prefix.

Clip-path:

Precis som vid skrivande (jul '16) Chrome stöder Safari och Opera clip-path när sökvägen skapas med hjälp av grundformer (som circle , polygon ) eller url(#clipper) syntax med inline SVG. De stöder inte klippning baserat på former som ingår i externa SVG-filer. De kräver -webkit prefixet -webkit ska vara närvarande.

Firefox stöder endast syntaxen url() för clip-path medan Internet Explorer (och Edge) inte erbjuder något stöd.

Klippning (polygon)

CSS:

div{
  width:200px;
  height:200px;
  background:teal;
  clip-path: polygon(0 0, 0 100%, 100% 50%); /* refer remarks before usage */
}

HTML:

<div></div>

I exemplet ovan används en polygonal klippningsväg för att klämma det fyrkantiga elementet (200 x 200) till en triangelform. Utgångsformen är en triangel eftersom banan börjar vid (det vill säga första koordinaterna är vid) 0 0 - vilket är lådans övre vänstra hörn och sedan går till 0 100% - vilket är rutan längst ner till vänster och slutligen till 100% 50% vilket inte är annat än rutan till höger-mittpunkten. Dessa banor är självstängande (det vill säga utgångspunkten kommer att vara slutpunkten) och så är den slutliga formen en triangel.

Detta kan också användas på ett element med en bild eller en lutning som bakgrund.

Visa exempel

Produktion:

ange bildbeskrivning här

Klippning (cirkel)

CSS:

div{
  width: 200px;
  height: 200px;
  background: teal;
  clip-path: circle(30% at 50% 50%); /* refer remarks before usage */
}

html

<div></div>

Det här exemplet visar hur man klippar en div till en cirkel. Elementet klipps in i en cirkel vars radie är 30% baserat på referensrutans dimensioner med dess mittpunkt mitt i referensrutan. Här eftersom ingen <clip-geometri-box> (med andra ord, referens box) är anordnad, varvid border-box av elementet kommer att användas som referensrutan.

Cirkelformen måste ha en radie och ett centrum med (x,y) koordinater:

circle(radius at x y)

Visa exempel

Produktion:

Cirkel med CSS-klippväg

Klippning och maskering: Översikt och skillnad

Med klippning och maskering kan du göra vissa specificerade delar av element transparenta eller ogenomskinliga. Båda kan tillämpas på alla HTML-element.

Klippning

Klipp är vektorbanor. Utanför denna väg kommer elementet att vara transparent, inuti det är ogenomskinligt. Därför kan du definiera en clip-path på element. Varje grafiskt element som också finns i SVG kan du använda här som en funktion för att definiera sökvägen. Exempel är circle() , polygon() eller ellipse() .

väg

Exempel
clip-path: circle(100px at center);

Elementet kommer endast att synas inuti denna cirkel, som är placerad i mitten av elementet och har en radie på 100px.

maskering

Masker liknar klipp, men istället för att definiera en sökväg definierar du en mask vilka lagrar över elementet. Du kan föreställa dig denna mask som en bild som består av huvudsakligen två färger: svart och vitt.

Luminansmask : Svart betyder att regionen är ogenomskinlig och vit att den är transparent, men det finns också ett grått område som är halvtransparent, så att du kan göra smidiga övergångar.

Alfamask : Endast på de transparenta områdena av masken kommer elementet att vara ogenomskinligt.

luminansmask

Denna bild kan till exempel användas som en luminansmask för att göra ett element en mycket smidig övergång från höger till vänster och från ogenomskinlig till transparent.

Den mask egendom kan du ange den masken typ och en bild som ska användas som lager.

Exempel
mask: url(masks.svg#rectangle) luminance;

Ett element som kallas rectangle definierat i masks.svg kommer att användas som en luminansmask på elementet.

Enkel mask som bleknar en bild från fast till transparent

CSS

div {
  height: 200px;
  width: 200px;
  background: url(http://lorempixel.com/200/200/nature/1);
  mask-image: linear-gradient(to right, white, transparent); 
}

html

<div></div>

I exemplet ovan finns ett element med en bild som bakgrund. Masken som appliceras på bilden (med CSS) får den att se ut som om den bleknar ut från vänster till höger.

Maskeringen uppnås genom att använda en linear-gradient som går från vit (till vänster) till transparent (till höger) som masken. Eftersom det är en alfamask blir bilden transparent där masken är transparent.

Utgång utan mask:

ange bildbeskrivning här

Utgång med masken:

ange bildbeskrivning här

Obs! Som nämnts i kommentarerna fungerar exemplet ovan i Chrome, Safari och Opera endast när de används med prefixet -webkit . Detta exempel (med en linear-gradient som maskbild) stöds ännu inte i Firefox.

Använd masker för att klippa ett hål i mitten av en bild

CSS

div {
  width: 200px;
  height: 200px;
  background: url(http://lorempixel.com/200/200/abstract/6);
  mask-image: radial-gradient(circle farthest-side at center, transparent 49%, white 50%); /* check remarks before using */
}

html

I exemplet ovan skapas en transparent cirkel i mitten med hjälp av radial-gradient och den används sedan som en mask för att producera effekten av en cirkel som skärs ut från mitten av en bild.

Bild utan mask:

ange bildbeskrivning här

Bild med mask:

ange bildbeskrivning här

Använda masker för att skapa bilder med oregelbundna former

CSS

div { /* check remarks before usage */
  height: 200px;
  width: 400px;
  background-image: url(http://lorempixel.com/400/200/nature/4);
  mask-image: linear-gradient(to top right, transparent 49.5%, white 50.5%), linear-gradient(to top left, transparent 49.5%, white 50.5%), linear-gradient(white, white);
  mask-size: 75% 25%, 25% 25%, 100% 75%;
  mask-position: bottom left, bottom right, top left;
  mask-repeat: no-repeat;
}

html

<div></div>

I exemplet ovan används tre linear-gradient (som när de placeras i deras lämpliga positioner skulle täcka 100% x 100% av behållarens storlek) som masker för att producera ett transparent triangulärformat snitt längst ner på bilden.

Bild utan masken:

ange bildbeskrivning här

Bild med masken:

ange bildbeskrivning här



Modified text is an extract of the original Stack Overflow Documentation
Licensierat under CC BY-SA 3.0
Inte anslutet till Stack Overflow