[css] przeźroczyste tło

Podziel się:   Facebook   Google+   Twitter   GG   E-mail  

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.

Przykład dla przeźroczystości 50% koloru czarnego:

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%:

Powiązane artykuły

Kurs css

  • Kurs CSS dla niecierpliwych [cz 1/2]

    Co to jest CSS, po co go używać, jak go używać.. CSS - stylizowanie różnych elementów HTML, inaczej mówiąc: wizualizowanie/nadawanie odpowiedniego wyglądu strony www. Zaczynając kurs…

  • Kurs CSS dla niecierpliwych [cz 2/2]

    Kontynuacja przyspieszonego kursu dla niecierpliwych. Część 1/2 - Kurs CSS dla niecierpliwych 1/2 Zakładam, że znasz lub zapoznałeś/aś się już wstępnie z podstawami HTML, wiesz do czego…