CSS
Klippning och maskering

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

Anmärkningar

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:

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:

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() .

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.

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.

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:

Utgång med masken:

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:

Bild med mask:

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:

Bild med masken: