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.
Incoming search terms:
- jak uzyskać efekt przezroczystości tła w joomla
- jak zarobić na grafice przezroczyste tło
- przeźroczyste tło pod tekst w joomla
- jak zrobić przezroczyste tło na mojej stronie na fb
- jak zrobic napis z przeźroczyslym tlem na strone
- przezroczyste tło stronę www
- jak zrobić baner z przeźroczystym tłem
- jak zrobić opacity w css
- przezroczysta strona w worpress
- jak zrobic przezroczysta strone w wordpress
Related posts:
- Jak zrobić serwis z ogłoszeniami na stronie www Serwis ogłoszeniowy na stronie www Joomla pozwala na stworzenie na stronie www serwisu ogłoszeniowego, nawet płatnego. Przetestowałam 2 wtyczki do...
Wpisz komentarz