Ostatnio edytowany:

mask-position

Autor: Virtual Patriot

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

Dodatkowe techniczne informacje 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

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

wzorzec wartości 1~2

Opis

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

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

Opis

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

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;
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ę 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(http://webkod.pl/files/css/maska-r1.png);
        mask-repeat:no-repeat;
        mask-position:right 50px bottom 25px;
        -webkit-mask-image:url(http://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:#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-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;
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 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(http://webkod.pl/files/css/maska-m1.png), url(http://webkod.pl/files/css/maska-m2.png);
        mask-repeat:no-repeat, 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:no-repeat, no-repeat;
        -webkit-mask-position:left top, right bottom;
        border:15px solid black;
        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>