[HTML/CSS] divje half transparant maar content niet?

[Verwijderd]

Hee mensjes,

K heb een divje met content, en nu wil ik dat die div 50% transparant is, en dat lukt wel maar de content wordt ook transparant en dat wil ik niet!


<div style='width:515px; FILTER:Alpha(Opacity=50); background-color:#000000;'>

bladie bla + plaatje

</div>

Kan iemand me helpen?

Het is geen optie om em absolute te maken en er een ander half transparant divje onder te zetten helaas!

[Glabbeek]

In Internet Explorer (de enige browser waar de genoemde opacity filter gaat werken) inheriten de child-elements de opacity van de parents op die manier dat 100% opacity gelijk is aan de opacity van de parent. Het is dus niet mogelijk om een childelement van een div met 50% niet-transparant weer te geven: het zal altijd maximaal 50% opacity hebben. De manier hoe ik het heb opgelost op mijn site is toch de manier zoals je aangeeft dat je het niet wil hebben: Twee divs tonen die absolute gepositioneerd zijn, maar geen parent-child relatie met elkaar hebben.

Om transpante objecten in Firefox of Opera te krijgen moet je trouwens

Cascading Stylesheet:

opacity:0.5;

gebruiken.

[Verwijderd]

Ik heb hier ook een keer mee zitten klooien en mij is het destijds niet gelukt (in sommige browsers werkte het wel en in sommige niet).

Maar aangezien je je div precies 50% transparant wilt krijgen, kun je dat ook met een herhalende .gif als achtergrondafbeelding doen. Een .gif van 2 bij 2 pixels en dan 2 pixels gekleurd en 2 pixels transparant.

Maar misschien dat er nog iemand reageert met de 'echte' oplossing , ik ben zelf ook wel benieuwd .

[RM-rf]

Verwijderd schreef op dinsdag 15 augustus 2006 @ 16:14:

Het is geen optie om em absolute te maken en er een ander half transparant divje onder te zetten helaas!

jammer dan, wat je wilt kan niet...
een child element in een semi-transparent element kan niet boven de transparantie van zijn parent uitgaan. (redelijk normaal als je bedenkt dat het een child is, het ingevat zit in het element)

er zijnw el degelijk oplossingen, maar die bestaan dan uit ervoor ze zorgen dat er twee elementen zich in de DIV bevinden, een die bovenop ligt en een achtergrond DIV voor de semi-tansparante achtergrond..

een (ongetest) voorbeeldje als:

code:

<div style='width:515px; position:relative;'>
     <div style="z-index: 10;position: relative;">
             bladie bla + plaatje
     </div>
     <div style="position: absolute; width:100%; height: 100%; FILTER:Alpha(Opacity=50); background-color:#000000; opacity:0.5;z-index:0;"></div>
</div>

zou moeten kunnen werken

[ Voor 22% gewijzigd door RM-rf op 15-08-2006 16:28 ]

[Victor]

PNG van 1x1 met een zwarte pixel die z'n alpha channel op 50% heeft staan als achtergrond gebruiken.

Fix voor IE: http://alistapart.com/stories/pngopacity/

[Verwijderd]

King_Louie schreef op dinsdag 15 augustus 2006 @ 16:27:
PNG van 1x1 met een zwarte pixel die z'n alpha channel op 50% heeft staan als achtergrond gebruiken.

Fix voor IE: http://alistapart.com/stories/pngopacity/

Dan zou ik toch eerder voor mijn oplossing van de transparante .gif gaan, want dan hoef je het ook niet nog apart voor IE te fixen.

[Blaise]

http://zopp.nl/dump/zokanhetook

Het nadeel is dat je voor <= IE6 de PNG precies op maat moet maken omdat background-repeat niet werkt, en bovendien het element dat de PNG als achtergrond heeft de grootte van de PNG aanneemt. In een aantal gevallen is dat dus niet werkbaar.

[Victor]

Verwijderd schreef op dinsdag 15 augustus 2006 @ 16:35:
[...]


Dan zou ik toch eerder voor mijn oplossing van de transparante .gif gaan, want dan hoef je het ook niet nog apart voor IE te fixen.

Alleen heb je bij die oplossing een grid van wel en niet transparante pixels, niet bepaald waar de TS naar op zoek was.

Blaise schreef op dinsdag 15 augustus 2006 @ 16:38:
http://zopp.nl/dump/zokanhetook

Het nadeel is dat je voor <= IE6 de PNG precies op maat moet maken omdat background-repeat niet werkt, en bovendien het element dat de PNG als achtergrond heeft de grootte van de PNG aanneemt. In een aantal gevallen is dat dus niet werkbaar.

Probeer het eens zo:

Cascading Stylesheet:

AlphaImageLoader(src = "plaatje.png", sizingMethod = "scale");

Het plaatje wordt nu opgerekt naar de afmetingen van het element.

[Verwijderd]

King_Louie schreef op dinsdag 15 augustus 2006 @ 17:46:
Alleen heb je bij die oplossing een grid van wel en niet transparante pixels, niet bepaald waar de TS naar op zoek was.

Maar dat zie je eigenlijk alleen maar als je heel erg inzoomt.

[Blaise]

King_Louie schreef op dinsdag 15 augustus 2006 @ 17:46:

[...]

Probeer het eens zo:

Cascading Stylesheet:

AlphaImageLoader(src = "plaatje.png", sizingMethod = "scale");

Het plaatje wordt nu opgerekt naar de afmetingen van het element.

Oeh handig, daar was ik nog niet. updated.

Maar waarom doet Alistapart zo overkill met een Javascript oplossing? Als je geen IE-only filter wil serveren aan niet-IE browsers gebruik je toch gewoon <!--[if lte IE6]>? Niet dat dat nodig is, want die browsers negeren dat gewoon.