Autor publikacji: Virtual Patriot - Administrator

mask-size

Data publikacji: Maj 03 2017
Ostatnio edytowano: Wrzesień 07 2020

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

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

Za pomocą właściwości mask-size możemy określić rozmiar maski interesującego nas elementu HTML.

Informacje dodatkowe: brak

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

przeznaczenie: element HTML każdego typu
pozycja: dowolna
dziedziczenie: nie
wartość initial: auto
wyjątki initial: brak
animowanie: tak, lecz nie wartość auto, cover oraz contain

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

: tak
: tak, lecz z przedrostkiem -webkit-
: tak, lecz z przedrostkiem -webkit-
: tak, lecz z przedrostkiem -webkit-
: nie
: tak, lecz z przedrostkiem -webkit-

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

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

auto

Wyjaśnienie

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

Domyślnie maska elementu HTML posiada niezmieniony rozmiar (czyli rozmiar obrazka, który tworzy daną maskę elementu HTML).

Przykład

  mask-size:auto;

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" posiada niezmieniony rozmiar.

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

cover

Wyjaśnienie

Za pomocą wartości cover właściwości mask-size możemy sprawić, że rozmiar maski interesującego nas elementu HTML zostanie przeskalowany w taki sposób, aby wypełnić w całości rozmiar szerokości obszaru pozycjonowania tejże maski.

Przykład

  mask-size:cover;

Rozmiar maski przykładowego elementu "div" został przeskalowany w taki sposób, aby wypełnić w całości rozmiar szerokości obszaru pozycjonowania maski przykładowego elementu "div", ponieważ do wspomnianego elementu "div" została dodana właściwość "mask-size" wraz z wartością "cover".

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

contain

Wyjaśnienie

Za pomocą wartości contain właściwości mask-size możemy sprawić, że rozmiar maski interesującego nas elementu HTML zostanie przeskalowany w taki sposób, aby wypełnić w całości rozmiar wysokości obszaru pozycjonowania tejże maski.

Przykład

  mask-size:contain;

Rozmiar maski przykładowego elementu "div" został przeskalowany w taki sposób, aby wypełnić w całości rozmiar wysokości obszaru pozycjonowania maski przykładowego elementu "div", ponieważ do wspomnianego elementu "div" została dodana właściwość "mask-size" wraz z wartością "contain".

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

wzorzec wartości

Wyjaśnienie

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

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

            width height

Przykładowe zapisy

50px

50px 100px

auto 100px

25%

25% 50%

width

Składnik width jest wymaganym składnikiem wzorca wartości właściwości mask-size. Składnik width określa rozmiar szerokości maski interesującego nas elementu HTML.

Dostępne wartości: dowolna nieujemna liczba wraz z wybraną jednostką absolutną lub jednostką relatywną lub procenty lub wartość auto
Informacje dodatkowe: wartość auto oznacza, że gdy podamy wartość składnika height, wtedy rozmiar szerokości maski elementu HTML zostanie przeskalowany przez przeglądarkę internetową w taki sposób, aby zachować prawidłowe proporcje pomiędzy rozmiarem szerokości, a rozmiarem podanej przez nas wartości wysokości, czyli wartości składnika height
Wartości procentowe: wartości procentowe liczone są względem aktualnego rozmiaru szerokości obszaru pozycjonowania maski elementu HTML, której rozmiar chcemy określić
Wartość domyślna: brak

height

Składnik height nie jest wymaganym składnikiem wzorca wartości właściwości mask-size. Składnik height określa rozmiar wysokości maski interesującego nas elementu HTML.

Dostępne wartości: dowolna nieujemna liczba wraz z wybraną jednostką absolutną lub jednostką relatywną lub procenty lub wartość auto
Informacje dodatkowe: wartość auto oznacza, że gdy podamy wartość składnika width, wtedy rozmiar wysokości maski elementu HTML zostanie przeskalowany przez przeglądarkę internetową w taki sposób, aby zachować prawidłowe proporcje pomiędzy rozmiarem wysokości, a rozmiarem podanej przez nas wartości szerokości, czyli wartości składnika width
Wartości procentowe: wartości procentowe liczone są względem aktualnego rozmiaru wysokości obszaru pozycjonowania maski elementu HTML, której rozmiar chcemy określić
Wartość domyślna: auto

Przykład

  mask-size:300px 150px;

Rozmiar szerokości maski przykładowego elementu "div" wynosi 300 pikseli, natomiast rozmiar wysokości maski przykładowego elementu "div" wynosi 150 pikseli, ponieważ do wspomnianego elementu "div" została dodana właściwość "mask-size" wraz z następującymi wartościami: "300px 150px".

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/maska-01.png);
        mask-repeat:no-repeat;
        mask-size:300px 150px;
        -webkit-mask-image:url(https://webkod.pl/files/css/maska-01.png);
        -webkit-mask-repeat:no-repeat;
        -webkit-mask-size:300px 150px;
        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ł kilka masek jednocześnie, wtedy za pomocą sekwencji kilku oddzielonych od siebie znakiem przecinka wartości należących do właściwości mask-size możemy określić osobny rozmiar dla poszczególnej maski interesującego nas elementu HTML.

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

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

Przykład

  mask-size:150px 200px, 100px 125px;

Rozmiar szerokości pierwszej maski przykładowego elementu "div" wynosi 150 pikseli, natomiast rozmiar wysokości pierwszej maski przykładowego elementu "div" wynosi 200 pikseli, ponadto rozmiar szerokości drugiej maski przykładowego elementu "div" wynosi 100 pikseli, natomiast rozmiar wysokości drugiej maski przykładowego elementu "div" wynosi 125 pikseli, ponieważ do wspomnianego elementu "div" została dodana właściwość "mask-size" wraz z następującą sekwencją wartości: "150px 200px, 100px 125px".

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/maska-m1.png), url(https://webkod.pl/files/css/maska-m2.png);
        mask-repeat:no-repeat, no-repeat;
        mask-position:left top, right bottom;
        mask-size:150px 200px, 100px 125px;
        -webkit-mask-image:url(https://webkod.pl/files/css/maska-m1.png), url(https://webkod.pl/files/css/maska-m2.png);
        -webkit-mask-repeat:no-repeat, no-repeat;
        -webkit-mask-position:left top, right bottom;
        -webkit-mask-size:150px 200px, 100px 125px;
        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>