Ostatnio edytowany:

mask-image

Autor: Virtual Patriot

Opis właściwości mask-image

Za pomocą właściwości mask-image możemy określić, który obrazek powinien tworzyć maskę interesującego nas elementu HTML.

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

przeznaczenie

element HTML każdego typu

pozycja

dowolna

dziedziczenie

nie

wartość initial

none

wyjątki initial

brak

animowanie

nie (animacja nieciągła)

Interpretacja właściwości mask-image

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

none

Opis

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

Domyślnie żaden obrazek nie tworzy maski elementu HTML.

Przykład

  mask-image:none;
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

Żaden obrazek nie tworzy maski przykładowego elementu "div".

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

url()

Opis

Za pomocą właściwości mask-image oraz funkcji url() możemy określić, który obrazek powinien tworzyć maskę interesującego nas elementu HTML.

Przykład

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

Obrazkiem tworzącym maskę przykładowego elementu "div" jest obrazek znajdujący się pod adresem "http://webkod.pl/files/css/maska-01.png", ponieważ do wspomnianego elementu "div" została dodana właściwość "mask-image" wraz z wartością w postaci funkcji "url()", w której to funkcji została użyta wartość "http://webkod.pl/files/css/maska-01.png".

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

linear-gradient()

Opis

Za pomocą właściwości mask-image oraz funkcji linear-gradient() możemy określić, jaki gradient liniowy powinien tworzyć maskę interesującego nas elementu HTML.

Przykład

  mask-image:linear-gradient(black, transparent);
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

Obrazkiem tworzącym maskę przykładowego elementu "div" jest obrazek w postaci gradientu liniowego, ponieważ do wspomnianego elementu "div" została dodana właściwość "mask-image" wraz z wartością w postaci funkcji "linear-gradient()", w której to funkcji zostały użyte następujące wartości: "black, transparent".

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:linear-gradient(black, transparent);
        -webkit-mask-image:linear-gradient(black, transparent);
        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>

repeating-linear-gradient()

Opis

Za pomocą właściwości mask-image oraz funkcji repeating-linear-gradient() możemy określić, jaki powtarzający się gradient liniowy powinien tworzyć maskę interesującego nas elementu HTML.

Przykład

  mask-image:repeating-linear-gradient(black 0%, transparent 25%);
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

Obrazkiem tworzącym maskę przykładowego elementu "div" jest obrazek w postaci powtarzającego się gradientu liniowego, ponieważ do wspomnianego elementu "div" została dodana właściwość "mask-image" wraz z wartością w postaci funkcji "repeating-linear-gradient()", w której to funkcji zostały użyte następujące wartości: "black 0%, transparent 25%".

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:repeating-linear-gradient(black 0%, transparent 25%);
        -webkit-mask-image:repeating-linear-gradient(black 0%, transparent 25%);
        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>

radial-gradient()

Opis

Za pomocą właściwości mask-image oraz funkcji radial-gradient() możemy określić, jaki gradient promienisty powinien tworzyć maskę interesującego nas elementu HTML.

Przykład

  mask-image:radial-gradient(black, transparent);
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

Obrazkiem tworzącym maskę przykładowego elementu "div" jest obrazek w postaci gradientu promienistego, ponieważ do wspomnianego elementu "div" została dodana właściwość "mask-image" wraz z wartością w postaci funkcji "radial-gradient()", w której to funkcji zostały użyte następujące wartości: "black, transparent".

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:radial-gradient(black, transparent);
        -webkit-mask-image:radial-gradient(black, transparent);
        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>

repeating-radial-gradient()

Opis

Za pomocą właściwości mask-image oraz funkcji repeating-radial-gradient() możemy określić, jaki powtarzający się gradient promienisty powinien tworzyć maskę interesującego nas elementu HTML.

Przykład

  mask-image:repeating-radial-gradient(black 0%, transparent 10%);
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

Obrazkiem tworzącym maskę przykładowego elementu "div" jest obrazek w postaci powtarzającego się gradientu promienistego, ponieważ do wspomnianego elementu "div" została dodana właściwość "mask-image" wraz z wartością w postaci funkcji "repeating-radial-gradient()", w której to funkcji zostały użyte następujące wartości: "black 0%, transparent 10%".

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:repeating-radial-gradient(black 0%, transparent 10%);
        -webkit-mask-image:repeating-radial-gradient(black 0%, transparent 10%);
        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

Za pomocą sekwencji kilku oddzielonych od siebie znakiem przecinka wartości należących do właściwości mask-image możemy sprawić, że kilka obrazków będzie tworzyło kilka masek interesującego nas elementu HTML jednocześnie.

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

Przykład

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

Przykładowy element "div" posiada dwie maski jednocześnie (pierwszą maskę przykładowego elementu "div" tworzy obrazek znajdujący się pod adresem "http://webkod.pl/files/css/maska-m1.png", natomiast drugą maskę przykładowego elementu "div" tworzy obrazek znajdujący się pod adresem "http://webkod.pl/files/css/maska-m2.png"), ponieważ do wspomnianego elementu "div" została dodana właściwość "mask-image" wraz z następującą sekwencją wartości: "url(http://webkod.pl/files/css/maska-m1.png), url(http://webkod.pl/files/css/maska-m2.png)".

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>