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.

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

Can you see me?

Z maską

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ść.

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żej 1, tym ciemniejszy kolor, a im bliżej 0, tym jaśniejszy. Obecnie wynosi 0.6, ale jeśli go zwiększysz, na przykład do 0.9, stanie się bardzo ciemny, a do 0.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)

hsla(277, 98%, 61.4%, 0.6)

hsla(144, 100%, 35.9%, 0.6)

hsla(350, 94.3%, 58.4%, 0.6)

hsla(0, 0%, 98.4%, 0.6)

hsla(195, 83.3%, 57.6%, 0.6)

Możesz nawet ustawić efektowny gradient jako maskę.

                                      
                                        <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

0.3

0.55

0.7

0.8

0.9