Autor Zpráva
zbystr
Profil *
Zdravim,
snazim se vyresit jednu vecicku, bohuzel zatim neuspesne.....
mam neco takoveho ...


<div class="bg">
<div class="menu"><a href="#">Profil Firmy</a></div>
<div class="menu"><a href="#">Sortiment</a></div>
</div>

a css je


.bg {
background-color:#000000;
height:26px;
padding-left:50px;
}

.menu {
width:100px;
float:left;
text-align:center;
}


.menu a {
padding-left:10px;
padding-right:10px;
height:20px;
display:block;
vertical-align:middle;
padding-top:6px;
color:#FF0000;
font-variant:small-caps;
font-weight:bold;

}
.menu a:hover {
background-color:#FFFFFF;
filter: alpha(opacity=5);
-moz-opacity: 0.05;
opacity: 0.05;
}


vysledek je to, ze se pozadi odkazu ztransparentuje. Avsak problem je v tom, ze transparentni je i text. Vim, ze jednou moznosti je to resit pres semi-transparent PNG na pozadi, ale to nechci.
Zkousel jsem neco takoveho ..


<div class="menu"><a href="#"><span>Sortiment</span></a></div>


a + css


.menu a:hover span{
filter: alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}


ale bez uspechu ....nemate nekdo reseni??
jeste takova poznamka, je tu moznost v CSS3 pres rgba(r,g,b,alpha) ---- ale mam pocit, ze skoro zadnej prohlizec CSS3 nepodporuje

Za cokoliv diky

ZbySTr
Joker
Profil
Co takhle namísto
background-color:#FFFFFF;
nastavit
background-color: transparent;

To je to co chcete?
Edit: vlastně nechcete, pokud chcete jenom poloprůhlednost... hmm...

ale mam pocit, ze skoro zadnej prohlizec CSS3 nepodporuje
Je to tak. CSS3 má holt ještě čas. Nakonec třeba Internet Explorer, a to ani budoucí IE7, ještě nezvládá ani CSS2.1 ;-)
Bubák
Profil
zbystr
jednou moznosti je to resit pres semi-transparent PNG
Nením, co máš na mysli. Pokud "pavučinu", kde se střídají průhledné a neprůhledné body, tak to jde i s GIFem. Pokud průsvitný PNG, tak ten neumí IE, zvládne ho až IE7.

Zplácnul jsem tohle, ale nemám to otestované v IE, mám najetý Linux. Průsvitnost pro starý Firefox a pro IE a doplnit ID nebo třídu menu, si myslím, zvládneš doplnit sám ;-)

<style>
body {background: aqua url(pozadi.png); font-family: sans-serif;}
a {text-decoration: none; display: block; height: 1.5em; width: 150px; position: relative; position: relative; }
span {display: block; height: 100%; width: 100%; position: absolute; top: 0; left: 0 }
span.text {display: block; color: black }
span.pozadi {background: red; }
a:hover span.pozadi {opacity: 0.2;}
</style>
<a href="odkaz.html"><span class="pozadi">&nbsp;</span><span class="text">Text odkazu</span></a>
zbystr
Profil *
Bubák
Diky moc ....tak to me to nenapadlo

ZbySTr
Bubák
Profil
zbystr
Mě taky ne, až dneska ;-)
zbystr
Profil *
jeste me napada jedna vec. Umi GIF poloprusvitnost tak jako PNG?
Zkousel jsem totiz udelat poloprusvitny PNG (coz krom IE funguje), je tu sice takova vychytavka jak na IE pres .AlphaImageLoader, ale vysledky zobrazeni jsou dosti odlisne v IE a FF.

ZbySTr
Bubák
Profil
Umi GIF poloprusvitnost tak jako PNG? Neumí, GIF nemá alfa kanál.
Zajímavé čtení o GIFu - seriál www.root.cz/serialy/graficky-format-gif/
Toto téma je uzamčeno. Odpověď nelze zaslat.

0