Ostatnio edytowany:

mask-composite

Autor: Virtual Patriot

Opis 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.

Dodatkowe techniczne informacje o właściwości mask-composite

przeznaczenie

element HTML każdego typu

dziedziczenie

nie

wartość initial

add

wyjątki initial

brak

animowanie

nie (animacja nieciągła)

Interpretacja właściwości mask-composite

Firefox

tak

Google Chrome

nie

Safari

nie

Opera

nie

Internet Explorer

nie

Edge

nie

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

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

add

Opis

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(http://webkod.pl/files/css/kolo-01.png), url(http://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:#CBFFFF;
      }
    </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

Opis

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;
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

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(http://webkod.pl/files/css/kolo-01.png), url(http://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:#CBFFFF;
      }
    </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

Opis

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;
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

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(http://webkod.pl/files/css/kolo-01.png), url(http://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:#CBFFFF;
      }
    </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

Opis

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;
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

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(http://webkod.pl/files/css/kolo-01.png), url(http://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:#CBFFFF;
      }
    </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

Opis

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ładowe mieszanie się kilku masek elementu HTML

Przykładowa kompozycja składająca się z kilku obrazków tworzących kilka masek elementu HTML jednocześnie.

Przykład

  mask-composite:intersect, 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", 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(http://webkod.pl/files/css/trojkat-01.png), url(http://webkod.pl/files/css/kolo-01.png), url(http://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:#CBFFFF;
      }
    </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>