Half transparent iframe

[Anoniem: 88864]

Ik wil een iframe waarvan de achtergrond half transparent is (of beter gezegd: de achtergrond moet iets witter zijn dan de achtergrond van de hoofdpagina). Om dat te bereiken heb ik het volgende gedaan:

1. In de iframe tag allowtransparency=1;
2. In de stylesheet is background-color: transparent;
3. Afbeelding 4 pixel, 2 daarvan wit de andere 2 transparant.
4. Background-image: transparante afbeelding.

Dit werkt maar het wit lijkt een raster en de tekst ziet er onduidelijk uit. Kent iemand een betere manier om dit op te lossen?

[sjaakaq]

ehm ja als je die achtergrondafbeelding half wit hald transparant maakt krijg je dat ja;

het witte deel is een beetje transparant wit
het transparante deel is transparant

gewoon een gifje van 1x1 en die wit maken en als achtergrondafbeelding.

[Willem]

1px gifjes als opvullen zijn ranzig

al eens gehoord van filter:alpha(opacity=50); ?

[Blaise]

Als je dat doet wordt ook de hele inhoud van de i-frame transparant

[Anoniem: 88864]

willem169 schreef op 17 februari 2004 @ 22:21:
1px gifjes als opvullen zijn ranzig

al eens gehoord van filter:alpha(opacity=50); ?

Die had ik inderdaad al geprobeerd. Het enige alternatief is het wittere vlak onderdeel van de achtergrond maken, maar dat is niet echt praktisch, wat als het iframe om de een of andere reden over de pagina gaat zwalken?

[drm]

Hm, ja de enige manier om dit een beetje lekker op te lossen is afaik een layertje onderop leggen die van zichzelf een witte achtergrond kleur heeft en een opacity van x %.

Je zult dan wel moeten zorgen dat die layer de volledige hoogte en breedte van het iframe heeft. Voor Mozilla/Firefox kun je gewoon position:fixed; gebruiken, voor IE een height:100% en width:100% als je het html en body element ook die breedte en hoogte geeft. (100% dus)

Dat zou wel aardig moeten werken, gok ik zo.

Iets dergelijks dus:

Cascading Stylesheet:

body, html {
   height:100%;
   width:100%;
}
div#bg {
   height:100%;
   width:100%;
   z-index:0;
   background-color:#ffffff;
   left:0; top: 0;
   position:fixed;
   filter:Alpha(opacity=30);
   -moz-opacity:0.3;
}

even uit m'n duim.