Ostatnio edytowany:

mask-repeat

Autor: Virtual Patriot

Opis właściwości mask-repeat

Za pomocą właściwości mask-repeat możemy określić sposób powtarzania się maski interesującego nas elementu HTML.

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

przeznaczenie

element HTML każdego typu

dziedziczenie

nie

wartość initial

no-repeat

wyjątki initial

brak

animowanie

nie (animacja nieciągła)

Interpretacja właściwości mask-repeat

Firefox

tak

Google Chrome

tak, lecz z przedrostkiem -webkit-

Safari

tak, lecz z przedrostkiem -webkit-

Opera

tak, lecz z przedrostkiem -webkit-

Internet Explorer

nie

Edge

nie

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

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

repeat

Opis

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

Domyślnie maska elementu HTML powtarzana jest zarówno w poziomie, jak i w pionie.

Przykład

  mask-repeat:repeat;
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 przykładowego elementu "div" powtarzana jest zarówno w poziomie, jak i w pionie.

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/maska-r1.png);
        -webkit-mask-image:url(http://webkod.pl/files/css/maska-r1.png);
        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>

repeat-x

Opis

Za pomocą wartości repeat-x właściwości mask-repeat możemy sprawić, że maska interesującego nas elementu HTML będzie powtarzana tylko w poziomie.

Przykład

  mask-repeat:repeat-x;
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 przykładowego elementu "div" powtarzana jest wyłącznie w poziomie, ponieważ do wspomnianego elementu "div" została dodana właściwość "mask-repeat" wraz z wartością "repeat-x".

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/maska-r1.png);
        mask-repeat:repeat-x;
        -webkit-mask-image:url(http://webkod.pl/files/css/maska-r1.png);
        -webkit-mask-repeat:repeat-x;
        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>

repeat-y

Opis

Za pomocą wartości repeat-y właściwości mask-repeat możemy sprawić, że maska interesującego nas elementu HTML będzie powtarzana tylko w pionie.

Przykład

  mask-repeat:repeat-y;
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 przykładowego elementu "div" powtarzana jest wyłącznie w pionie, ponieważ do wspomnianego elementu "div" została dodana właściwość "mask-repeat" wraz z wartością "repeat-y".

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/maska-r1.png);
        mask-repeat:repeat-y;
        -webkit-mask-image:url(http://webkod.pl/files/css/maska-r1.png);
        -webkit-mask-repeat:repeat-y;
        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>

no-repeat

Opis

Za pomocą wartości no-repeat właściwości mask-repeat możemy sprawić, że maska interesującego nas elementu HTML nie będzie powtarzana.

Przykład

  mask-repeat:no-repeat;
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 przykładowego elementu "div" nie jest powtarzana, ponieważ do wspomnianego elementu "div" została dodana właściwość "mask-repeat" wraz z wartością "no-repeat".

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/maska-r1.png);
        mask-repeat:no-repeat;
        -webkit-mask-image:url(http://webkod.pl/files/css/maska-r1.png);
        -webkit-mask-repeat:no-repeat;
        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>

round

Opis

Za pomocą wartości round właściwości mask-repeat możemy sprawić, że maska interesującego nas elementu HTML będzie powtarzana zarówno w poziomie, jak i w pionie oraz (jeżeli będzie to konieczne) zostanie ona przeskalowana w taki sposób, aby wypełnić równomiernie w całości poszczególny rozmiar wspomnianego elementu HTML.

Przykład

  mask-repeat:round;
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 przykładowego elementu "div" powtarzana jest w stylu "round", ponieważ do wspomnianego elementu "div" została dodana właściwość "mask-repeat" wraz z wartością "round".

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/maska-r1.png);
        mask-repeat:round;
        -webkit-mask-image:url(http://webkod.pl/files/css/maska-r1.png);
        -webkit-mask-repeat:round;
        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>

space

Opis

Za pomocą wartości space właściwości mask-repeat możemy sprawić, że maska interesującego nas elementu HTML będzie powtarzana zarówno w poziomie, jak i w pionie oraz (jeżeli będzie to konieczne) zostanie ona rozmieszczona (bez dodatkowego skalowania) w taki sposób, aby zmieścić się w całości w poszczególnym rozmiarze wspomnianego elementu HTML.

Przykład

  mask-repeat:space;
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 przykładowego elementu "div" powtarzana jest w stylu "space", ponieważ do wspomnianego elementu "div" została dodana właściwość "mask-repeat" wraz z wartością "space".

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/maska-r1.png);
        mask-repeat:space;
        -webkit-mask-image:url(http://webkod.pl/files/css/maska-r1.png);
        -webkit-mask-repeat:space;
        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>

wzorzec wartości

Opis

Za pomocą właściwości mask-repeat oraz z góry zdefiniowanego wzorca wartości możemy określić sposób powtarzania się maski interesującego nas elementu HTML.

Składniki wzorca wartości właściwości mask-repeat

Przykładowe zapisy

round

round repeat

space round

no-repeat space

horizontal

Składnik horizontal jest wymaganym składnikiem wzorca wartości właściwości mask-repeat. Składnik horizontal określa sposób powtarzania się w poziomie maski interesującego nas elementu HTML.

Dostępne wartości

wartości właściwości mask-repeat (wyłącznie wartość repeat, no-repeat, round lub wartość space)

Wartość domyślna

brak

vertical

Składnik vertical nie jest wymaganym składnikiem wzorca wartości właściwości mask-repeat. Składnik vertical określa sposób powtarzania się w pionie maski interesującego nas elementu HTML.

Dostępne wartości

wartości właściwości mask-repeat (wyłącznie wartość repeat, no-repeat, round lub wartość space)

Wartość domyślna

wartość składnika horizontal

Przykład

  mask-repeat:repeat round;
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 przykładowego elementu "div" w poziomie powtarzana jest w stylu "repeat", natomiast w pionie powtarzana jest w stylu "round", ponieważ do wspomnianego elementu "div" została dodana właściwość "mask-repeat" wraz z następującymi wartościami: "repeat round".

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/maska-r1.png);
        mask-repeat:repeat round;
        -webkit-mask-image:url(http://webkod.pl/files/css/maska-r1.png);
        -webkit-mask-repeat:repeat round;
        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ł kilka masek jednocześnie, wtedy za pomocą sekwencji kilku oddzielonych od siebie znakiem przecinka wartości należących do właściwości mask-repeat możemy określić osobny sposób powtarzania się poszczególnej maski interesującego nas elementu HTML.

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

Jeżeli podana przez nas sekwencja wartości właściwości "mask-repeat" będzie zawierała mniejszą liczbę wartości 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-repeat" tak, aby uzyskać wystarczającą liczbę wartości.

Przykład

  mask-repeat:repeat-x, no-repeat;
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

Pierwsza maska przykładowego elementu "div" powtarzana jest wyłącznie w poziomie, natomiast druga maska przykładowego elementu "div" nie jest powtarzana, ponieważ do wspomnianego elementu "div" została dodana właściwość "mask-repeat" wraz z następującą sekwencją wartości: "repeat-x, no-repeat".

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/maska-m1.png), url(http://webkod.pl/files/css/maska-m2.png);
        mask-repeat:repeat-x, no-repeat;
        mask-position:left top, right bottom;
        -webkit-mask-image:url(http://webkod.pl/files/css/maska-m1.png), url(http://webkod.pl/files/css/maska-m2.png);
        -webkit-mask-repeat:repeat-x, no-repeat;
        -webkit-mask-position:left top, right bottom;
        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>