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.
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.
W odpowiedzi na “Przezroczysty tekst w kolorze tła”
Dobre do ukrywania słów kluczowych na stronie – a to dość ryzykowne …