Autor publikacji: Virtual Patriot - Administrator

mask-composite

Data publikacji: Maj 03 2017
Ostatnio edytowano: Grudzień 28 2024

Zobacz również: w3.org - mask-composite property (LV1)

Przeznaczenie właściwości `mask-composite`

Za pomocą właściwości mask-composite możemy określić tryb mieszania się masek interesującego nas elementu HTML.

Informacje dodatkowe: mieszanie się masek elementu HTML rozpoczyna się od ostatniej posiadanej przez element HTML maski

Informacje techniczne o właściwości `mask-composite`

przeznaczenie: element HTML każdego typu
pozycja: dowolna
dziedziczenie: nie
wartość initial: add
wyjątki initial: brak
animowanie: tak (animacja schodkowa)

Interpretacja właściwości `mask-composite`

: tak
: nie
: nie
: nie
: nie
: nie

Zobacz więcej informacji o interpretacji właściwości mask-composite.

Opis wartości właściwości `mask-composite`

add

Wyjaśnienie

Wartość add jest domyślną wartością właściwości mask-composite.

Domyślnie maska elementu HTML występująca pod łączy się w jedną całość z maską elementu HTML występującą nad.

Przykład

  mask-composite:add;

ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych

Maska "kwadrat-01.png" przykładowego elementu "div" połączyła się w jedną całość z maską "kolo-01.png" przykładowego elementu "div".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        mask-image:url(https://webkod.pl/files/css/kolo-01.png), url(https://webkod.pl/files/css/kwadrat-01.png);
        mask-repeat:no-repeat, no-repeat;
        mask-position:0 0, 100px 100px;
        padding:1em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>
      ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
    </div>

  </body>
</html>

subtract

Wyjaśnienie

Za pomocą wartości subtract właściwości mask-composite możemy sprawić, że cała maska interesującego nas elementu HTML występująca pod zostanie odjęta od maski interesującego nas elementu HTML występującej nad.

Przykład

  mask-composite:subtract;

Cała maska "kwadrat-01.png" przykładowego elementu "div" została odjęta od maski "kolo-01.png" przykładowego elementu "div", ponieważ do wspomnianego elementu "div" została dodana właściwość "mask-composite" wraz z wartością "subtract".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        mask-image:url(https://webkod.pl/files/css/kolo-01.png), url(https://webkod.pl/files/css/kwadrat-01.png);
        mask-repeat:no-repeat, no-repeat;
        mask-position:0 0, 100px 100px;
        mask-composite:subtract;
        padding:1em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>
      ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
    </div>

  </body>
</html>

intersect

Wyjaśnienie

Za pomocą wartości intersect właściwości mask-composite możemy sprawić, że tylko część wspólna maski interesującego nas elementu HTML występującej pod oraz maski interesującego nas elementu HTML występującej nad pozostanie widoczna.

Przykład

  mask-composite:intersect;

Tylko część wspólna maski "kwadrat-01.png" przykładowego elementu "div" oraz maski "kolo-01.png" przykładowego elementu "div" pozostała widoczna, ponieważ do wspomnianego elementu "div" została dodana właściwość "mask-composite" wraz z wartością "intersect".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        mask-image:url(https://webkod.pl/files/css/kolo-01.png), url(https://webkod.pl/files/css/kwadrat-01.png);
        mask-repeat:no-repeat, no-repeat;
        mask-position:0 0, 100px 100px;
        mask-composite:intersect;
        padding:1em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>
      ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
    </div>

  </body>
</html>

exclude

Wyjaśnienie

Za pomocą wartości exclude właściwości mask-composite możemy sprawić, że część wspólna maski interesującego nas elementu HTML występującej pod oraz maski interesującego nas elementu HTML występującej nad zostanie odjęta.

Przykład

  mask-composite:exclude;

Część wspólna maski "kwadrat-01.png" przykładowego elementu "div" oraz maski "kolo-01.png" przykładowego elementu "div" została odjęta, ponieważ do wspomnianego elementu "div" została dodana właściwość "mask-composite" wraz z wartością "exclude".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        mask-image:url(https://webkod.pl/files/css/kolo-01.png), url(https://webkod.pl/files/css/kwadrat-01.png);
        mask-repeat:no-repeat, no-repeat;
        mask-position:0 0, 100px 100px;
        mask-composite:exclude;
        padding:1em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>
      ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
    </div>

  </body>
</html>

sekwencja wartości

Wyjaśnienie

Jeżeli zdecydowaliśmy się na to, aby interesujący nas element HTML posiadał więcej niż dwie maski jednocześnie, wtedy za pomocą sekwencji kilku oddzielonych od siebie znakiem przecinka wartości należących do właściwości mask-composite możemy określić osobny tryb mieszania się poszczególnych masek interesującego nas elementu HTML.

Podana przez nas sekwencja wartości właściwości "mask-composite" nie może zawierać wartości globalnych.

Jeżeli podana przez nas sekwencja wartości właściwości "mask-composite" będzie zawierała mniejszą liczbę wartości (przynajmniej o dwie) niż liczba obrazków tworzących poszczególne maski elementu HTML, wtedy przeglądarka internetowa powtórzy podaną przez nas sekwencję wartości właściwości "mask-composite" tak, aby uzyskać wystarczającą liczbę wartości.

Przykład

  mask-composite:intersect, add;

Maska "kwadrat-01.png" przykładowego elementu "div" połączyła się w jedną całość z maską "kolo-01.png" przykładowego elementu "div", a następnie część wspólna w ten sposób powstałej maski oraz maski "trojkat-01.png" przykładowego elementu "div" pozostała widoczna, ponieważ do wspomnianego elementu "div" została dodana właściwość "mask-composite" wraz z następującą sekwencją wartości: "intersect, add".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        mask-image:url(https://webkod.pl/files/css/trojkat-01.png), url(https://webkod.pl/files/css/kolo-01.png), url(https://webkod.pl/files/css/kwadrat-01.png);
        mask-repeat:no-repeat, no-repeat, no-repeat;
        mask-position:0 0, 0 0, 100px 100px;
        mask-composite:intersect, add;
        padding:1em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>
      ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
    </div>

  </body>
</html>