- Autor publikacji
- Virtual Patriot - Administrator
mask-image
- Data publikacji
- Ostatnio edytowano
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
- 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;
Ż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>