[ CSS ] Afbeeldingen in transparante div mee transparant

[Verwijderd]

Hoi,

Ik heb een div die transparant is gemaakt voor de achtergrond afbeelding, echter alle afbeeldingen die ik nu plaats in die div (de <img> dus) zijn mee transparant zoals de smilies / foto ...

Om het allemaal wat duidelijker te maken, hier het ontwerp =>

http://hoaxer.be/dump/skin/

(de rede dat ik de css code hier niet post is omdat het zowel gaat over stylesheet css als inlay css en dat te onverzichtelijk zou zijn)

Iemand een idee hoe ik er voor kan zorgen dat de afbeeldingen (<img>) niet mee transparant worden? Ik heb al geprobeerd

img { filter:alpha(opacity=99); -moz-opacity:.99; opacity:.99; }

of een achtergrond kleur te gebruiken, ze in een aparte div te zetten, ... niets helpt

[Verwijderd]

Hij lijkt de boel te overerven van de div waarin de transparantie gedefinieerd staat. Maar eens een css entry aan met .Denaamvandediv img {code waarin je transparantie 0% maakt}

Moet trouwens wel zeggen, het is nooit verstandig om zowel inline als extern css te gebruiken, ook voor je eigen overzicht niet. ALLES is in principe mogelijk in een extern css

[ Voor 33% gewijzigd door Verwijderd op 17-04-2008 16:24 ]

[Verwijderd]

Ik ga niet je code door liggen spitten, probeer eens ID's en Classes toe te kennen. En css heeft een background-image attribuut dus een img als achtergrond is niet nodig.

[TeeDee]

Heeft het hoofdelement transparantie? > alle childnodes hebben minimaal dezelfde transparantie. En daar is niet veel aan te doen.
voor zover ik het me goed kan herinneren

[MueR]

de opacity van 0.7 die je hebt ingesteld wordt inderdaad meegenomen door alle child elements. Deze background wil je gewoon via een semi-transparante png doen denk ik.

[PeterSelie]

TeeDee schreef op donderdag 17 april 2008 @ 16:29:
Heeft het hoofdelement transparantie? > alle childnodes hebben minimaal dezelfde transparantie. En daar is niet veel aan te doen.
voor zover ik het me goed kan herinneren

Klopt, childs hebben automatisch dezelfde transparantie als de parent. Wanneer je childs dan 100% transparantiteit meegeeft, zal dat 100% van de parent zijn. Wanneer de childs dan een transparantiteit van 50% meegegeven krijgen, is dat 50% van de transparantiteit van de parents (als ik het me goed kan herinneren)

[1st_Ro]

Wat je kan doen (en wat ik stiekum soms ook doe):

Achtergrond PNG maken die semi-transparant is (background: url(bg.png) ), dit kan een 1px x 1px plaatje zijn. en die toekennen aan die DIV. Dan hoef je ook niet de opacity in te stellen.

Dit werkt wel voor FF en IE7. Voor IE6 moet je even de filter erbij pakken

[RM-rf]

als je een element transparant maakt, wordt het hele element transparant, dus ook de inhoud...

je kunt een element zien als een 'raam' naar de erbinnen liggende objecten en als je bv melkglas in je raam hebt gezet, zijn alle achter het raam liggende object witachtig-vaag... of die objecten zelf weer een heldere kleur krijgen helpt niks..

de enige oplossing die je kunt toepassen is bv een PNG met alfa-transparantie te gebruiken als achtergrondbeeld (niet in msie)
Of een extra element via z-index achter andere elementen leggen maar wel absoluut gepositioneerd met 100% BxH

[ Voor 10% gewijzigd door RM-rf op 17-04-2008 16:50 ]

[Verwijderd]

Verwijderd schreef op donderdag 17 april 2008 @ 16:23:
Hij lijkt de boel te overerven van de div waarin de transparantie gedefinieerd staat. Maar eens een css entry aan met .Denaamvandediv img {code waarin je transparantie 0% maakt}

Moet trouwens wel zeggen, het is nooit verstandig om zowel inline als extern css te gebruiken, ook voor je eigen overzicht niet. ALLES is in principe mogelijk in een extern css

al reeds gedaan met img { opacity:0.1;filter:alpha(opacity=100) } maar hij neemt dan nog steeds de transparantie mee van de bovenliggende div,

Wat betreft de inline / extern css, dat weet ik, maar dat zou betekenen dat we met "dynamische" stylesheets moeten gaan werken omdat elke gebruiker zijn eigen achtergrond afbeelding / opmaak volledig kan aanpassen ... niet echt optimaal, dus het is sneller omdat met style="" de waarden aan te passen met die vanuit de database

[Knaak]

MueR schreef op donderdag 17 april 2008 @ 16:32:
de opacity van 0.7 die je hebt ingesteld wordt inderdaad meegenomen door alle child elements. Deze background wil je gewoon via een semi-transparante png doen denk ik.

What he said..

Ook raad ik je aan om gif'jes te gebruiken, aangezien IE6 geen PNG support heeft.

(wel doormiddel van een backdoor-trick, maargoed..)

[TeeDee]

offtopic:
IE6 moet opzouten. Zo. Punt! Dan maar wat minder grafisch geweld!

Verwijderd schreef op donderdag 17 april 2008 @ 16:35:
[...]
al reeds gedaan met img { opacity:0.1;filter:alpha(opacity=100) } maar hij neemt dan nog steeds de transparantie mee van de bovenliggende div,

Dat klopt.
Als de parentnode een opacity van 50% heeft en een childnode ingesteld is op 100% zal de childnode efficiënt een opacity van 50% hebben.

Stel je de childnode in op 50% zal dit efficiënt een opacity van 25% zijn.

[ Voor 76% gewijzigd door TeeDee op 17-04-2008 16:38 ]

[Sebazzz]

Je hoeft trouwens geen -moz-opacity meer te gebruiken sinds Firefox 2, die ondersteunt gewoon opacity

[WeeJeWel]

Leg gewoon een div eroverheen op dezelfde positie, en daarin zet je de image?

[Verwijderd]

Ok, veel reacties! Veel goede tips!

Voorlopig kies ik wel voor de pngfix

=> http://hoaxer.be/dump/skin/index2.html ... nu enkel nog zorgen dat het voor IE6 werkt

[Cartman!]

Wat ik altijd doe is 2 containers maken, 1 met de transparantie en 1 er boven renderen (andere z-index) met de content. Zo heb je geen hacks/fixes nodig en je kunt alles met css doen. Het enige nadeel is een extra element in je code.

[alex3305]

Cartman! schreef op donderdag 17 april 2008 @ 21:36:
Wat ik altijd doe is 2 containers maken, 1 met de transparantie en 1 er boven renderen (andere z-index) met de content. Zo heb je geen hacks/fixes nodig en je kunt alles met css doen. Het enige nadeel is een extra element in je code.

Cartman heeft gelijk, zo moet het. Ik heb hier een tijdje terug ook naar gezocht namelijk. Echter had ik mijn vraag gesubmit naar een site, ik kan alleen niet zo snel vinden waar dat was.

Instant Update :P: http://www.dedestruct.com...divs-with-opaque-content/