Przezroczysty tekst w kolorze tła

Podczas jednej z luźnych rozmów w pracy okazało się, że kolega potrzebuje efektu przezroczystego tekstu, przez który przebija obraz tła. Wtedy przypomniałem sobie o pewnej technice, którą dawno temu znalazłem w sieci. Nie pamiętam autorki tego triku, ale w kilku przypadkach sprawdza się przednio.

Całość sztuczki polega na odpowiednim przygotowaniu tła dla oczekiwanego efektu. Element zawierający formatowany tekst pozycjonujemy relacyjnie, a wewnątrz niego umieszczamy dodatkowy znacznik span. Wszystko po to, aby dodatkowy element pozycjonowany absolutnie przechowywał tło.

Download · Live Demo

Połączenie tych dwóch technik umożliwia uzyskanie nałożenia tła na tekście i połączenie go z kolorem bazowym tła. Uzyskanie wspomnianego efektu wymaga dodatkowych elementów w strukturze dokumentu. Jest to konieczne, ponieważ tekst zawsze wyświetlany na tle danego elementu.

Innym sposobem osiągnięcia przezroczystego tekstu w kolorze tła jest ustawienie odpowiednich właściwości dla elementu: background: url(kuba.jpg); i color: transparent;. Niestety samo to nie wystarczy, ponieważ zmiana sposobu generowania tekstu i tła wymaga jeszcze ustawienia jednej właściwości. A dokładnie reguły background-clip: text; ze specyfikacji CSS3.

Jedna odpowiedź do “Przezroczysty tekst w kolorze tła”

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *