Przezroczystość na stronie www - jak zrobić?

Ciekawym elementem jest przezroczystość, kiedy to pod prześwitującym tłem widać tło które jest pod spodem. Takie efekt jest na moim blogu http://chcesierozwijac.zdrowienatopie.pl/. Pod górnym paskiem i pod głównym tłem strony widać jesienne liście. Zostało to zrobione przy pomocy przezroczystej grafiki png.

Grafika png ma tę zaletę, że można stworzyć przezroczystość, która wygląda ładniej i jest lepszej jakości niż gify. Poza tym łatwiej ją zrobić.  Grafika ma tę wade, ze trzeba ją stworzyć, powiększa ilość zapytań, utrudnia pozycjonowanie. Co najgorsze utrudnia późniejsze zmiany jeśli zawiera tekst, który chcemy zmienić.

Jak zrobić przezroczysty element przy pomocy css?

<style type=”text/css”>
div
{
background-color:red;
opacity:0.5;
filter:Alpha(opacity=50); /* IE8 and earlier */
}
</style>

Taka deklaracja stylu stworzy półprzezroczysty czerwony element.

Wadą tego rozwiązania jest to, że każdy element potomny (czyli np. tekst w środku divu) także będzie przezroczysty. Nie zawsze jest to dobre dla naszego motywu strony.

Znalazłam ciekawe rozwiązanie na blogu: http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/

.alpha60 {
/* Fallback for web browsers that doesn’t support RGBa */
background: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
background: rgba(0, 0, 0, 0.6);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
padding: 20px;
margin: 20px;
}

Stosujemy tutaj zapis RGB. W RGBa jako ostatnią wartość podajemy alpha.

Stosujemy tu filtr gradientu dla IE – pierwsze 2 liczby oznaczają alpha, a następne 6 liczb to numer koloru – taki sam dla początku i końca gradientu. W IE9 przezroczystość wyświetla się poprawnie bez filtra. I rzeczywiście w IE9, FF i Ch napis w środku nie jest przezroczysty.

 

 

Leave a reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.