Autor publikacji: Virtual Patriot - Administrator

mask-image

Data publikacji: Maj 03 2017
Ostatnio edytowano: Grudzień 28 2024

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

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

Informacje dodatkowe: brak

Informacje techniczne 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: tak (animacja schodkowa)

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

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

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

none

Wyjaśnienie

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

url()

Wyjaśnienie

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

Obrazkiem tworzącym maskę przykładowego elementu "div" jest obrazek znajdujący się pod adresem "https://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ść "https://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(https://webkod.pl/files/css/maska-01.png);
        -webkit-mask-image:url(https://webkod.pl/files/css/maska-01.png);
        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>

linear-gradient()

Wyjaśnienie

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);

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

repeating-linear-gradient()

Wyjaśnienie

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%);

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

radial-gradient()

Wyjaśnienie

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);

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

repeating-radial-gradient()

Wyjaśnienie

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%);

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

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

Przykładowy element "div" posiada dwie maski jednocześnie (pierwszą maskę przykładowego elementu "div" tworzy obrazek znajdujący się pod adresem "https://webkod.pl/files/css/maska-m1.png", natomiast drugą maskę przykładowego elementu "div" tworzy obrazek znajdujący się pod adresem "https://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(https://webkod.pl/files/css/maska-m1.png), url(https://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(https://webkod.pl/files/css/maska-m1.png), url(https://webkod.pl/files/css/maska-m2.png);
        mask-repeat:repeat-x, 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:repeat-x, no-repeat;
        -webkit-mask-position:left top, right bottom;
        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>