Autor publikacji
Virtual Patriot - Administrator

mask-position

Data publikacji
Ostatnio edytowano

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.

Informacje dodatkowe

brak

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

tak, lecz z przedrostkiem -webkit-

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.

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.

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:#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

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.

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.

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.

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.

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:#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

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:#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>