Jak stworzyć: obraz z tekstem przezroczystym

Naucz się, jak używać CSS do tworzenia obrazów z tekstem o przezroczystym ( półprzezroczystym) tłem.

Przejrzysty obraz tekstowy

Norway
Nagłówek

Lorem ipsum dolor sit amet, an his etiam torquatos. Tollit soleat phaedrum te duo, eum cu recteque expetendis neglegentur. Cu mentitum maiestatis persequeris pro, pri ponderum tractatos ei.

Spróbuj sam

Jak utworzyć przejrzysty obraz tekstowy

Krok 1 - Dodaj HTML:

<div class="container">
  <img src="notebook.jpg" alt="Notebook" style="width:100%;">
  <div class="content">
    <h1>Nagłówek</h1>
    <p>Lorem ipsum..</p>
  </div>
</div>

Krok 2 - Dodaj CSS:

.container {
  position: relative;
  max-width: 800px; /* Maksymalna szerokość */
  margin: 0 auto; /* Centrowanie */
}
.container .content {
  position: absolute; /* Lokalizacja tła tekstu */
  bottom: 0; /* Na dole. Użyj top:0, aby przyczepić do góry */
  background: rgb(0, 0, 0); /* Kolor powrotu */
  background: rgba(0, 0, 0, 0.5); /* Nieprzejrzystość 0.5, czarny tło */
  color: #f1f1f1; /* Tekst szary */
  width: 100%; /* Całkowita szerokość */
  padding: 20px; /* Niektóre wewnętrzne marginesy */
}

Spróbuj sam