[CSS] Alpha niet voor img

[Baarsjes]

Ik ben bezig met een site, waarbij ik een CSS template gebruik, deze template heb ik niet zelf gemaakt maar wil deze wel graag aanpassen met mijn gebrekkige CSS kennis en google skills.

Deze template maakt gebruik van diverse div tags. Ik heb een div voor de content, deze maakt gebruik van een alpha effect. Dit wordt gedaan met de volgende code:

code:

#maincontent{
position: absolute;
    width: 540px;
    height: 385px;
    top: 130px;
    left: 196px;
    background-color: #FFDAEC;
    z-index: 12;
    clear: both;
    text-indent: 20px;
    -moz-opacity     : 0.85; 
    filter           : Alpha(opacity=85, finishopacity=85, style=1); 
    overflow: auto;
    overflow-x: hidden;
}

Dit zorgt ervoor dat ik een layer over mijn background image heen heb en de background image erdoor heen schijnt, zeer mooi natuurlijk. Maar in de tekst die in de content komt wil ik soms ook plaatjes tonen. Deze vallen binnen bovenstaande div en worden dan ook gewoon transparant. En dat wil ik dus niet.

Is er een mogelijkheid om de alpha uit te schakelen binnen deze div voor alle plaatjes op basis van de img tag? Of moet dit op een andere manier? Ik heb reeds vrij veel gegoogled maar volgens mij ben ik de enige die dit wil of met dit probleem zit.

[Noork]

Werkt zoiets niet?

code:

#maincontent img {
-moz-opacity     :1; 
filter           : Alpha(opacity=100, finishopacity=100, style=1); 
}

[moozzuzz]

Wellicht niet omdat je alles in die transparante div deels doorzichtig maakt. Met andere woorden, de maximale niet-transparantie is in #maincontent gelijk aan 85%. Of alles is minimaal 15% doorzichtig. Je zou de img al in een div moeten plaatsen die buiten de maincontent leeft en die over maincontent heen ligt.... moeilijk.

Sorry voor onduidelijke uitleg :^P

[user109731]

Misschien is het makkelijker om zoiets te doen:

HTML:

<div id="main">
  <div id="transparent"></div>
  <h1>Test</h1>
  <p>paragraph
</div>

Met stylesheet:

Cascading Stylesheet:

#main { position:relative; }
#transparent { 
  opacity:0.7;
  position:absolute;
  width:100%; height:100%;
  top:0; left:0;
}

Mogelijk nog wel z-index gebruiken en/of een extra div om de content...

[Johnny]

Even off-topic, in het voorbeeld van Grote Prutser zie je dat hij opacity gebruikt in plaats van -moz-opacity, dan werkt de transparantie ook meteen in Opera en Konquerer/Safari.

[Baarsjes]

Grote prutser schreef op woensdag 06 september 2006 @ 17:24:
Misschien is het makkelijker om zoiets te doen:

HTML:

<div id="main">
  <div id="transparent"></div>
  <h1>Test</h1>
  <p>paragraph
</div>

Met stylesheet:

Cascading Stylesheet:

#main { position:relative; }
#transparent { 
  opacity:0.7;
  position:absolute;
  width:100%; height:100%;
  top:0; left:0;
}

Mogelijk nog wel z-index gebruiken en/of een extra div om de content...

Zou je kunnen uitleggen wat je hier exact mee doet? Met mijn leken oog maak je nu een main div aan. Deze is niet transparant, daarna maak je een transparant div aan. Deze is wel transparant en komt in de main div te staan en beslaat het de gehele content div.

Als ik dit doe, ongeacht wel of geen plaatje, is het geheel niet meer transparant. Ook niet als ik de z-index aanpas zodat deze over of onder de maincontent zou komen te liggen. Zou ik op deze manier over de gehele main div een soortement van transparante laag moeten kunnen leggen? En zo ja, doet dit dan niet exact hetzelfde met een eventueel plaatje?/

Toevoeging:
Denk dat ik het al beter snap. Ik heb de volgende div aangemaakt:

code:

#trans {
    -moz-opacity     : 0.85; 
    filter           : Alpha(opacity=85, finishopacity=85, style=1); 
    position:absolute;
    width:100%; height:100%;
    top:0; left:0;
    background-color: #FFDAEC;
    z-index: -1;
}

Deze wordt aangeroepen in de maincontent met

code:

<div id="maincontent"><div id="trans"></div>...

De achtergrond is nu goed transparant en de foto niet, mooi mooi. Echter, ik denk dat door de height 100%, de waarde wordt genomen op het moment van het openen van de pagina. Indien de pagina in het gebruikte frame groter is dan het frame kan weergeven, is het onderste gedeelte niet gevuld met de achtergrond kleur. Is er zoiets als een dynamische waarde, zodat dit automatisch wordt aangepast?

Toevoeging 2:
Het ligt nog wat anders, in FF werkt het wel maar met bovenstaand resultaat. In IE werkt het van geen kanten.

[ Voor 29% gewijzigd door Baarsjes op 06-09-2006 21:09 ]

[Baarsjes]

Het is mij niet gelukt om een image niet transparant te tonen in een transparante laag. Een extra laag ertussen die transparant was werkte zoals te lezen niet in alle browses even goed. Ik heb het nu opgelost door de achtergrond zelf te voorzien van een transparante laag, niet zo mooi maar tot op heden wel effectief.

Dank allen voor de tips in ieder geval.

[orthello]

-moz-opacity is geen standaard CSS. Daarbij is het sinds mei 2006 niet meer nodig om deze in je CSS op te nemen tbv Mozilla browsers. Opacity zou moeten volstaan.

quote: http://www.mandarindesign.com/opacity.html

Update May 2006
The abobe opacity examples look the same in this Firefox browser. The -moz-opacity is no longer needed. We used it in earlier versions of Mozilla and left it in for possible backward compatibility issues. Opacity works fine in our Mozilla Firefox browser with or without the proprietary code. Opacity also works in current versions of Opera.

Sorry voor mijn 'spuit 11' gedrag, maar ik wilde het toch even onder de aandacht brengen.

[ Voor 7% gewijzigd door orthello op 20-09-2006 09:05 ]