[Transparant] De beste oplossing?

[quakerix]

Ok heren,

ik gebruik al een tijdje transparant-truukjes op verschillende sites maar ben er niet achter wat nou de beste oplossing is.

Optie1

Op 1 van m'n sites gebruik CSS om het voor elkaar te krijgen:

code:

background-color:#172637;
filter:alpha(opacity=80);
-moz-opacity:0.8;

Zie hier voorbeeld: Logic-team.com

En om te voorkomen dat je tekst ook doorzichtig wordt moet je dus 2 DIVjes dmv absolute over elkaar heen gooien.

NADEEL:
- De content groeit niet mee..
- Daarnaast heb ik nog het gedoe dat als de height wil VAST stellen en ermaar voor zorg dat er niet mere content in kom. Is dat height 100% nogal verschillend wordt gelezen door de verschillende browsers, MZ/IE6/IE7. Hiervoor heb ik nog geen oplossing....
VOORDEEL:
- Makkelijk te gebruiken. Geen hoog CPU gebruik.

Optie 2

Dat is dus een doorzichtig plaatje te gebruiken. De CSS code:

code:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='images/bg.png');
background-image: url('images/bg.png');

Zie hier voorbeeld: quakerix blog

PNG plaatje is gewoon een plaatje die 75% transparant is.

VOORDEEL:
- Je content groeit en schrinkt nu wel mee.
NADEEL:
- Bij mij, en nu vraag ik me het af hoe dat bij jullie is, is het CPU gebruik 100% bij het scrollen. En dat sucks.

Vragen

Nu vraag ik me af, hoe zorg ik ervoor dat 1 van de 2 opties wel goed werkt. Als je bij optie 2 een veel groter plaatje dan 10x1 doet. Verbruikt hij dan minder CPU? (ga ik zo testn) of is dat nog op een andere manier op te lossen?

Bij optie1, is er een mogelijkheid om een javascript te schrijven die dit oplost? Maybe in combinatie met wat PHP. Dat ik bijv. de height afhankelijk doet van het aantal woorden die in m'n content doet. En dat het javascript m'n background vergroot of niet?

Ik heb geen javascript tallents, dus hopelijk kunnen jullie mij daar in helpen. Of althans maybe voorbeeldjes aandragen.

of is er een optie 3? Er moet toch iets zijn waarmee je dit kan oplossen.

[quakerix]

Nu vraag ik me af, hoe zorg ik ervoor dat 1 van de 2 opties wel goed werkt. Als je bij optie 2 een veel groter plaatje dan 10x1 doet. Verbruikt hij dan minder CPU? (ga ik zo testn) of is dat nog op een andere manier op te lossen?

ik heb het gevoel, graag bevestiging, dat het veel CPU uitmaakt als je die images 100x groter maakt. Op de vb pagina heb ik nu een image van 100 bij nog wat gedaan.

[smeerbartje]

Ik heb hier geen last van pieken in het CPU verbruik. (Firefox 2.0.0.4)

[ Voor 14% gewijzigd door smeerbartje op 16-06-2007 11:51 . Reden: Browser ]

[quakerix]

smeerbartje schreef op vrijdag 15 juni 2007 @ 21:37:
Ik heb hier geen last van pieken in het CPU verbruik.

ik wel als ik bijv. met m'n muis over het menu heenga.

[sky-]

Ik heb hier ook geen last van. (Opera icm Windows XP)

[Mei]

Alphaimageloader is IE-only he. In fatsoenlijke browsers kan je gewoon een transparant PNG-tje als achtergrondafbeelding instellen. Ik krijg bij de alphaimageloader in FF trouwens mijn CPU gebruik op 100% als ik flink over het menu heen ga. Ik heb een P4 2,8Ghz.

Wat je CSS oplossing betreft: Da's geen geldige code. Volgens de CSS (3) specs moet je 'opacity' gebuiken voor transparantie. 'moz-opacity' werkt alleen in gecko als ik de naam zo zie, maar gecko ondersteunt 'opacity' ook al tijden.