Jak otrzymać efekt przeźroczystego lub częściowo przeźroczystego tła na stronie www, które będzie działać w każdej przeglądarce i w każdym systemie operacyjnym?
Na początek warto przyglądnąć się rozwiązaniu tego problemu z użyciem CSS3, który jest obsługiwany przez coraz większą ilość przeglądarek i powoli staje się dobrą alternatywą dla wszystkich “obejść” , “how-to” i wszelkich modyfikacjach pod konkretne przeglądarki.
Aby otrzymać efekt przeźroczystego tła (i tylko tła, bez tekstu ani żadnego innego elementu wewnątrz), wystarczy po prostu zamienić paletę barw ze zwykłego RGB (domyślny) na RGBA (RGB + Alpha) następującym kodem:
background-color: rgba(255,0,0,0.5);
Niestety jak to na proste rozwiązanie przypadło – nie działa wszędzie 😉
Jest jednak prosty i sprawdzony (a przede wszystkim uniwersalny) sposób na uzyskanie efektu przeźroczystego tła na stronie www:
Wystarczy zastosować tło obrazkowe, składające się z wielu pikselowej wielkości przezroczystych grafik.
Dodając do tego zapis grafiki w postaci kodu base64 otrzymujemy liniowy kod na przeźroczyste tło.
Kod : można wymienić na dowolny z poniższej listy (lub na dowolny inny otrzymany poprzez zakodowanie grafiki do poziomu kodu base64):
Czarny 10%:
Czarny 20%:
Czarny 30%:
Czarny 40%:
Czarny 50%:
Czarny 60%:
Czarny 70%:
Czarny 80%:
Czarny 90%:
Biały 10%:
Biały 20%:
Biały 30%:
Biały 40%:
Biały 50%:
Biały 60%:
Biały 70%:
Biały 80%:
Biały 90%: