Autor publikacji: Virtual Patriot - Administrator

mask-position

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

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

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

Za pomocą właściwości mask-position możemy określić względem krawędzi obszaru pozycjonowania pozycję początkową maski interesującego nas elementu HTML.

Informacje dodatkowe: brak

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

przeznaczenie: element HTML każdego typu
pozycja: dowolna
dziedziczenie: nie
wartość initial: 0% 0%
wyjątki initial: brak
animowanie: tak

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

: 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-position.

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

wzorzec wartości 1~2

Wyjaśnienie

Za pomocą właściwości mask-position oraz z góry zdefiniowanego wzorca wartości składającego się z od jednego do dwóch składników możemy określić względem krawędzi obszaru pozycjonowania pozycję początkową maski interesującego nas elementu HTML.

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

x y

Przykładowe zapisy

right

right bottom

30px

30px -120px

-25% top

x

Składnik x jest wymaganym składnikiem wzorca wartości właściwości mask-position. Składnik x określa względem lewej krawędzi obszaru pozycjonowania pozycję początkową maski interesującego nas elementu HTML.

Dostępne wartości: dowolna liczba wraz z wybraną jednostką absolutną lub jednostką relatywną lub procenty lub pojedyncza wartość pozycjonująca (bez wartości top oraz wartości bottom)
Wartości dodatnie: wartości dodatnie przesuwają maskę elementu HTML w prawo względem lewej krawędzi obszaru pozycjonowania
Wartości ujemne: wartości ujemne przesuwają maskę elementu HTML w lewo względem lewej krawędzi obszaru pozycjonowania
Wartości procentowe: wartości procentowe liczone są względem aktualnej różnicy pomiędzy rozmiarem szerokości obszaru pozycjonowania, a rozmiarem szerokości maski elementu HTML, której pozycję chcemy określić
Wartość domyślna: brak

y

Składnik y nie jest wymaganym składnikiem wzorca wartości właściwości mask-position. Składnik y określa względem górnej krawędzi obszaru pozycjonowania pozycję początkową maski interesującego nas elementu HTML.

Dostępne wartości: dowolna liczba wraz z wybraną jednostką absolutną lub jednostką relatywną lub procenty lub pojedyncza wartość pozycjonująca (bez wartości left oraz wartości right)
Wartości dodatnie: wartości dodatnie przesuwają maskę elementu HTML w dół względem górnej krawędzi obszaru pozycjonowania
Wartości ujemne: wartości ujemne przesuwają maskę elementu HTML w górę względem górnej krawędzi obszaru pozycjonowania
Wartości procentowe: wartości procentowe liczone są względem aktualnej różnicy pomiędzy rozmiarem wysokości obszaru pozycjonowania, a rozmiarem wysokości maski elementu HTML, której pozycję chcemy określić
Wartość domyślna: center

Przykład

  mask-position:150px 50px;

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

Pozycja początkowa maski przykładowego elementu "div" znajduje się 150 pikseli na prawo od lewej krawędzi obszaru pozycjonowania maski przykładowego elementu "div" oraz 50 pikseli w dół od górnej krawędzi obszaru pozycjonowania maski przykładowego elementu "div", ponieważ do wspomnianego elementu "div" została dodana właściwość "mask-position" wraz z następującymi wartościami: "150px 50px".

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-r1.png);
        mask-repeat:no-repeat;
        mask-position:150px 50px;
        -webkit-mask-image:url(https://webkod.pl/files/css/maska-r1.png);
        -webkit-mask-repeat:no-repeat;
        -webkit-mask-position:150px 50px;
        border:15px solid black;
        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 3~4

Wyjaśnienie

Za pomocą właściwości mask-position oraz z góry zdefiniowanego wzorca wartości składającego się z od trzech do czterech składników możemy określić względem krawędzi obszaru pozycjonowania pozycję początkową maski interesującego nas elementu HTML.

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

            edgeFirst valueFirst edgeSecond valueSecond

Przykładowe zapisy

right 15px top

right 15px top 30px

top 30px right

top 30px right -15px

left -50% bottom 25%

edgeFirst

Składnik edgeFirst jest wymaganym składnikiem wzorca wartości właściwości mask-position. Składnik edgeFirst wskazuje pierwszą krawędź obszaru pozycjonowania, względem której powinno dokonywać się obliczanie pozycji początkowej maski interesującego nas elementu HTML.

Dostępne wartości: pojedyncza wartość pozycjonująca (bez wartości center)
Sposób podawania: jeżeli zdecydowaliśmy się podać wartość left lub wartość right, wtedy dla składnika edgeSecond możemy podać tylko wartość top lub wartość bottom. Natomiast jeżeli zdecydowaliśmy się podać wartość top lub wartość bottom, wtedy dla składnika edgeSecond możemy podać tylko wartość left lub wartość right.
Wartość domyślna: brak

valueFirst

Składnik valueFirst jest wymaganym składnikiem wzorca wartości właściwości mask-position. Składnik valueFirst określa względem tej krawędzi obszaru pozycjonowania, na którą wskazuje wartość składnika edgeFirst pozycję początkową maski interesującego nas elementu HTML.

Dostępne wartości: dowolna liczba wraz z wybraną jednostką absolutną lub jednostką relatywną lub procenty
Wartości dodatnie: wartości dodatnie przesuwają maskę elementu HTML w prawo (gdy wartością składnika edgeFirst jest wartość left), w lewo (gdy wartością składnika edgeFirst jest wartość right), w dół (gdy wartością składnika edgeFirst jest wartość top) lub w górę (gdy wartością składnika edgeFirst jest wartość bottom) względem wskazanej przez składnik edgeFirst krawędzi obszaru pozycjonowania
Wartości ujemne: wartości ujemne przesuwają maskę elementu HTML w lewo (gdy wartością składnika edgeFirst jest wartość left), w prawo (gdy wartością składnika edgeFirst jest wartość right), w górę (gdy wartością składnika edgeFirst jest wartość top) lub w dół (gdy wartością składnika edgeFirst jest wartość bottom) względem wskazanej przez składnik edgeFirst krawędzi obszaru pozycjonowania
Wartości procentowe: wartości procentowe liczone są względem aktualnej różnicy pomiędzy rozmiarem szerokości obszaru pozycjonowania, a rozmiarem szerokości maski elementu HTML, której pozycję chcemy określić, lecz tylko w sytuacji, gdy wartością składnika edgeFirst jest wartość left lub wartość right, w przeciwnym wypadku wartości procentowe liczone są względem aktualnej różnicy pomiędzy rozmiarem wysokości obszaru pozycjonowania, a rozmiarem wysokości maski elementu HTML, której pozycję chcemy określić
Wartość domyślna: brak

edgeSecond

Składnik edgeSecond jest wymaganym składnikiem wzorca wartości właściwości mask-position. Składnik edgeSecond wskazuje drugą krawędź obszaru pozycjonowania, względem której powinno dokonywać się obliczanie pozycji początkowej maski interesującego nas elementu HTML.

Dostępne wartości: pojedyncza wartość pozycjonująca (bez wartości center)
Sposób podawania: jeżeli zdecydowaliśmy się podać wartość left lub wartość right, wtedy dla składnika edgeFirst możemy podać tylko wartość top lub wartość bottom. Natomiast jeżeli zdecydowaliśmy się podać wartość top lub wartość bottom, wtedy dla składnika edgeFirst możemy podać tylko wartość left lub wartość right.
Wartość domyślna: brak

valueSecond

Składnik valueSecond nie jest wymaganym składnikiem wzorca wartości właściwości mask-position. Składnik valueSecond określa względem tej krawędzi obszaru pozycjonowania, na którą wskazuje wartość składnika edgeSecond pozycję początkową maski interesującego nas elementu HTML.

Dostępne wartości: dowolna liczba wraz z wybraną jednostką absolutną lub jednostką relatywną lub procenty
Wartości dodatnie: wartości dodatnie przesuwają maskę elementu HTML w prawo (gdy wartością składnika edgeSecond jest wartość left), w lewo (gdy wartością składnika edgeSecond jest wartość right), w dół (gdy wartością składnika edgeSecond jest wartość top) lub w górę (gdy wartością składnika edgeSecond jest wartość bottom) względem wskazanej przez składnik edgeSecond krawędzi obszaru pozycjonowania
Wartości ujemne: wartości ujemne przesuwają maskę elementu HTML w lewo (gdy wartością składnika edgeSecond jest wartość left), w prawo (gdy wartością składnika edgeSecond jest wartość right), w górę (gdy wartością składnika edgeSecond jest wartość top) lub w dół (gdy wartością składnika edgeSecond jest wartość bottom) względem wskazanej przez składnik edgeSecond krawędzi obszaru pozycjonowania
Wartości procentowe: wartości procentowe liczone są względem aktualnej różnicy pomiędzy rozmiarem szerokości obszaru pozycjonowania, a rozmiarem szerokości maski elementu HTML, której pozycję chcemy określić, lecz tylko w sytuacji, gdy wartością składnika edgeSecond jest wartość left lub wartość right, w przeciwnym wypadku wartości procentowe liczone są względem aktualnej różnicy pomiędzy rozmiarem wysokości obszaru pozycjonowania, a rozmiarem wysokości maski elementu HTML, której pozycję chcemy określić
Wartość domyślna: 0

Przykład

  mask-position:right 50px bottom 25px;

Pozycja początkowa maski przykładowego elementu "div" znajduje się 50 pikseli na lewo od prawej krawędzi obszaru pozycjonowania maski przykładowego elementu "div" oraz 25 pikseli w górę od dolnej krawędzi obszaru pozycjonowania maski przykładowego elementu "div", ponieważ do wspomnianego elementu "div" została dodana właściwość "mask-position" wraz z następującymi wartościami: "right 50px bottom 25px".

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-r1.png);
        mask-repeat:no-repeat;
        mask-position:right 50px bottom 25px;
        -webkit-mask-image:url(https://webkod.pl/files/css/maska-r1.png);
        -webkit-mask-repeat:no-repeat;
        -webkit-mask-position:right 50px bottom 25px;
        border:15px solid black;
        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-position możemy określić względem krawędzi obszaru pozycjonowania osobną pozycję początkową dla poszczególnej maski interesującego nas elementu HTML.

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

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

Przykład

  mask-position:left top, right bottom;

Pozycja początkowa pierwszej maski przykładowego elementu "div" znajduje się przy lewej oraz górnej krawędzi obszaru pozycjonowania pierwszej maski przykładowego elementu "div", natomiast pozycja początkowa drugiej maski przykładowego elementu "div" znajduje się przy prawej oraz dolnej krawędzi obszaru pozycjonowania drugiej maski przykładowego elementu "div", ponieważ do wspomnianego elementu "div" została dodana właściwość "mask-position" wraz z następującą sekwencją wartości: "left top, right bottom".

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;
        -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;
        border:15px solid black;
        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>