CSS
Przycinanie i maskowanie

Składnia

• Obrzynek
• ścieżka-ścieżki: <clip-source> | [<podstawowy>> <clip-geometry-box>] Żaden
• Maskowanie
• mask-image: [brak | <mask-reference>] #
• tryb maski: [<mask-tryb>] #
• mask-repeat: [<repeat-style] #
• mask-position: [<pozycja>] #
• mask-clip: [<geometry-box> | bez klipu] #
• mask-origin: [<geometry-box>] #
• mask-size: [<bg-size>] #
• mask-composite: [<compositing-operator>] #
• mask: [<mask-reference> <masking-mode>? || <pozycja> [/ <bg-size>]? || <repeat-style> || <skrzynka geometrii> || [<geometry-box> | bez klipu] || <compositing-operator>] #

Parametry

Uwagi

Obcinanie (wielokąt)

CSS:

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

HTML:

<div></div>

W powyższym przykładzie wielokątna ścieżka przycinająca służy do przycięcia kwadratowego elementu (200 x 200) do kształtu trójkąta. Kształt wyjściowy jest trójkątem, ponieważ ścieżka zaczyna się od (tzn. Pierwsze współrzędne są w) 0 0 - co jest lewym górnym rogiem pola, a następnie przechodzi do 0 100% - co jest lewym dolnym rogiem pola a następnie w końcu do 100% 50% co jest niczym innym jak prawym środkowym punktem pudełka. Ścieżki te zamykają się samoczynnie (tzn. Punktem początkowym będzie punkt końcowy), a zatem końcowy kształt ma kształt trójkąta.

Można to również zastosować do elementu z obrazem lub gradientem jako tłem.

Zobacz przykład

Wynik:

Obcinanie (koło)

CSS:

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

HTML

<div></div>

Ten przykład pokazuje, jak przypiąć div do okręgu. Element jest przycięty do koła, którego promień wynosi 30% w oparciu o wymiary pola odniesienia, a jego środek znajduje się na środku pola odniesienia. Tutaj, ponieważ nie podano <skrzynki klipu geodezyjnego> (innymi słowy, pola odniesienia), border-box elementu zostanie użyta jako pole odniesienia.

Kształt okręgu musi mieć promień i środek o współrzędnych (x,y) :

circle(radius at x y)

Zobacz przykład

Wynik:

Przycinanie i maskowanie: przegląd i różnica

Dzięki Clipping and Masking możesz sprawić, że niektóre określone elementy elementów będą przezroczyste lub nieprzezroczyste. Oba można zastosować do dowolnego elementu HTML.

Obrzynek

Klipy są ścieżkami wektorowymi. Poza tą ścieżką element będzie przezroczysty, w środku jest nieprzezroczysty. Dlatego możesz zdefiniować właściwość clip-path na elementach. Każdy element graficzny, który również istnieje w SVG, możesz użyć tutaj jako funkcji do zdefiniowania ścieżki. Przykładami są circle() , polygon() lub ellipse() .

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

Element będzie widoczny tylko wewnątrz tego koła, które jest umieszczone na środku elementu i ma promień 100 pikseli.

Maskowanie

Maski są podobne do klipów, ale zamiast definiować ścieżkę, definiujesz maskę, które warstwy nad elementem. Możesz sobie wyobrazić tę maskę jako obraz, który składa się głównie z dwóch kolorów: czarno-białego.

Maska luminancji : czarny oznacza, że region jest nieprzezroczysty, a biały, że jest przezroczysty, ale jest też szary obszar, który jest półprzezroczysty, dzięki czemu można wykonywać płynne przejścia.

Maska alfa : Tylko w przezroczystych obszarach maski element będzie nieprzezroczysty.

Ten obraz można na przykład wykorzystać jako maskę luminancji, aby uzyskać bardzo płynne przejście elementu od prawej do lewej i od nieprzezroczystego do przezroczystego.

Właściwość mask pozwala określić typ maski i obraz, który będzie używany jako warstwa.

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

Element o nazwie rectangle zdefiniowany w masks.svg zostanie użyty jako maska luminancji na elemencie.

Prosta maska, która zmienia obraz z jednolitego na przezroczysty

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>

W powyższym przykładzie jest element z obrazem jako tłem. Maska zastosowana na obrazie (za pomocą CSS) sprawia, że wygląda on tak, jakby zanikał od lewej do prawej.

Maskowanie uzyskuje się za pomocą linear-gradient który przechodzi od białego (po lewej) do przezroczystego (po prawej) jako maski. Ponieważ jest to maska alfa, obraz staje się przezroczysty tam, gdzie maska jest przezroczysta.

Wyjście bez maski:

Wyjście z maską:

Uwaga: jak wspomniano w uwagach, powyższy przykład działałby w Chrome, Safari i Operze tylko w -webkit prefiksem -webkit . Ten przykład (z linear-gradient jako obrazem maski) nie jest jeszcze obsługiwany w przeglądarce Firefox.

Używanie masek do wycinania dziury w środku obrazu

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

W powyższym przykładzie przezroczysty okrąg jest tworzony w środku za pomocą radial-gradient a następnie jest używany jako maska do uzyskania efektu wycięcia koła ze środka obrazu.

Obraz bez maski:

Obraz z maską:

Używanie masek do tworzenia obrazów o nieregularnych kształtach

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>

W powyższym przykładzie trzy obrazy linear-gradient (które po umieszczeniu w odpowiednich pozycjach obejmowałyby 100% x 100% wielkości pojemnika) są używane jako maski do utworzenia przezroczystego trójkątnego wycięcia u dołu obrazu.

Obraz bez maski:

Obraz z maską: