Darmowy kurs projektowania UI/UX
Dowiedz się, jak tworzyć wyjątkowe projekty, czytając mój nowy samouczek.
Rozpocznij naukęMaski
Sprawdź angielską wersje tej lekcji w naszym rozszerzonym tutorialu Bootstrap.
Widoczność naszego Call to action wciąż pozostawia wiele do życzenia. Musimy ją poprawić, a w tym zadaniu pomogą nam maski.
![](https://mdbcdn.b-cdn.net/learn/mdb-foundations/bootstrap/text-and-spacing/assets/text-4.jpg)
Maski zmieniają widoczność elementu, częściowo lub całkowicie go ukrywając. Maski służą do zwiększenia widoczności treści poprzez zapewnienie odpowiedniego kontrastu. Najczęściej stosuje się je na obrazach.
Bez maski
![Louvre Museum](https://mdbcdn.b-cdn.net/img/new/standard/city/053.webp)
Can you see me?
Z maską
![Louvre Museum](https://mdbcdn.b-cdn.net/img/new/standard/city/053.webp)
Can you see me?
Krok 1 - dodaj maskę
Musimy dodać maskę, która pokryje cały nasz obraz bohatera. Musi więc zostać dodana w taki sposób, aby była dzieckiem elementu Background Image
, a jednocześnie rodzicem elementu container
.
Zaktualizuj więc kod Obrazu nagłówka w następujący sposób:
<!-- Background image -->
<div class="bg-image vh-100" style="
margin-top: -58.59px;
background-image: url('https://mdbcdn.b-cdn.net/img/new/fluid/city/018.jpg');">
<!-- Mask -->
<div class="mask" style="background-color: hsla(0, 0%, 0%, 0.6)">
<!-- Container -->
<div class="container d-flex justify-content-center align-items-center h-100">
<!-- Call to action -->
<div class="text-white text-center">
<h1 class="mb-3">Whoah, what a view!</h1>
<h5 class="mb-4">Learning web design is such an amazing thing</h5>
<a class="btn btn-primary" href="#" role="button">Learn with me</a>
</div>
</div>
</div>
</div>
...i voilà!
Dodaliśmy ciemną maskę na obraz tła, dzięki czemu stworzyliśmy odpowiedni kontrast między nim a tekstem. Teraz wszystko ma właściwą widoczność.
![](https://mdbcdn.b-cdn.net/learn/mdb-foundations/bootstrap/masks/assets/mask-1.jpg)
Jak dokładnie to działa?
-
Maski wymagają opakowania
.bg-image
która ustawia pozycję na względną (relative),overflow
na ukrycie (hidden) oraz odpowiednio wyśrodkowuje obraz. -
Wewnątrz powinieneś umieścić maskę. Ustawiamy kolor i przezroczystość za pomocą kodu
hsla
i wewnętrznego CSS. -
Ostatni parametr koloru
hsla
określa przezroczystość. Manipulując nim, możesz zwiększać lub zmniejszać intensywność koloru, a tym samym kontrast. Im bliżej1
, tym ciemniejszy kolor, a im bliżej0
, tym jaśniejszy. Obecnie wynosi0.6
, ale jeśli go zwiększysz, na przykład do0.9
, stanie się bardzo ciemny, a do0.1
stanie się bardzo jasny.
Zmiana koloru maski
Manipulując kodem hsla
możesz zmieniać nie tylko intensywność, ale także sam kolor.
hsla(217, 88.8%, 50.8%, 0.6)
![city image](https://mdbcdn.b-cdn.net/img/new/standard/city/053.webp)
hsla(277, 98%, 61.4%, 0.6)
![city image](https://mdbcdn.b-cdn.net/img/new/standard/city/053.webp)
hsla(144, 100%, 35.9%, 0.6)
![city image](https://mdbcdn.b-cdn.net/img/new/standard/city/053.webp)
hsla(350, 94.3%, 58.4%, 0.6)
![city image](https://mdbcdn.b-cdn.net/img/new/standard/city/053.webp)
hsla(0, 0%, 98.4%, 0.6)
![city image](https://mdbcdn.b-cdn.net/img/new/standard/city/053.webp)
hsla(195, 83.3%, 57.6%, 0.6)
![city image](https://mdbcdn.b-cdn.net/img/new/standard/city/053.webp)
Możesz nawet ustawić efektowny gradient jako maskę.
![city image](https://mdbcdn.b-cdn.net/img/new/standard/city/053.webp)
<div class="bg-image rounded-7">
<img src="https://mdbcdn.b-cdn.net/img/new/standard/city/053.webp" class="w-100" />
<div
class="mask"
style="
background: linear-gradient(
45deg,
hsla(169, 84.5%, 52%, 0.7),
hsla(263, 87.7%, 44.7%, 0.7) 100%
);
"
></div>
</div>
Przezroczystość
Jak wcześniej wspomniano, zmieniając ostatnią wartość w kolorze hsla
możesz manipulować przezroczystością maski.
0.0 oznacza pełną przejrzystość, a 1.0 pełną nieprzejrzystość. Możesz ustawić dowolną wartość między 0.0 a 1.0.
hsla(0, 0%, 0%, 0.0)
- całkowicie przezroczysty
hsla(0, 0%, 0%, 1.0)
- całkowicie nieprzezroczysty
0.1
![city image](https://mdbcdn.b-cdn.net/img/new/standard/city/053.webp)
0.3
![city image](https://mdbcdn.b-cdn.net/img/new/standard/city/053.webp)
0.55
![city image](https://mdbcdn.b-cdn.net/img/new/standard/city/053.webp)
0.7
![city image](https://mdbcdn.b-cdn.net/img/new/standard/city/053.webp)
0.8
![city image](https://mdbcdn.b-cdn.net/img/new/standard/city/053.webp)
0.9
![city image](https://mdbcdn.b-cdn.net/img/new/standard/city/053.webp)
![John Doe](https://pbs.twimg.com/profile_images/1154666340298493952/F57OFDN7_400x400.jpg)
O autorze
Michal Szymanski
Współzałożyciel MDBootstrap / Umieszczony na liście Forbes „30 under 30” / Entuzjasta oprogramowania open-source / Tancerz, miłośnik wiedzy i książek.
Autor setek artykułów na temat programowania, biznesu, marketingu i efektywności. W przeszłości pracował jako edukator z młodzieżą z problemami w sierocińcach i zakładach karnych.