Opacity in CSS

[Verwijderd]

Hallo,
ik ben sinds kort bezig aan een website voor iemand. Ik heb een template gemaakt voor in Mambo, en heb daarbij gebruik gemaakt van DIVS en niet van tabellen.

Als je de website opent zie je op de homepage een foto op de achtergrond, met links daarop een kolom waar er "welkom" staat met een kort welkomsttekstje. Die kolom heeft een donkergrijze/bruinachtige achtergrond die ietwat doorzichtig is (je ziet de achtergrondfoto met die boom er een klein beetje door)
daarvoor maak ik gebruik van het CSS "element" opacity. Dit is dus de css-code voor de betreffende DIV:

#frame #left { width: 300px; height: 560px; border-right: 1px solid #000000; background: #FFFFFF url(../images/dark.gif); float: left; opacity: .9; filter: alpha(opacity=90); }

Het probleem is echter dat het effect opacity overgeëerfd wordt door de geneste DIVS. Dus ook door het vakje met de welkomsttekst. Nu is mijn vraag: hoe kan ik ervoor zorgen dat de grijsbruine achtergrond wel deels doorzichtig is maar niét hetgene dat erop komt (dus het vakje met de welkomsttekst e.d.).

Alvast Bedankt
Jeroen Verheye

[Verwijderd]

Oja, vergeten, de url van de website is http://www.ronaldvandommele.be/

[Verwijderd]

je kunt in CSS dacht ik een soort sub tags aan maken, als je daarin nou eens de geneste div's een eigen stukkie in het css geeft, en dan weer eens de opacity specifiek definieert?

[Verwijderd]

Ik heb mijn code dus verandert naar:

Cascading Stylesheet:

/* CSS Profielen voor Ronaldvandommele.be */

/* ALGEMEEN & WEDERKEREND OP ELKE PAGINA */

body { margin-top: 0px; background: #FFFFFF; }
p { margin-left: 10px; }

/* DIVS */

#frame { width: 750px; height: 560px; text-align: left; border-left: 1px solid #000000; border-right: 1px solid #000000; border-bottom: 1px solid #000000; overflow: auto; visibility: visible; background: #FFFFFF url(/Default/extern/bg.gif);} 

#frame #left { width: 300px; height: 560px; border-right: 1px solid #000000; background: #FFFFFF url(../images/dark.gif); float: left; opacity: 0.9; filter: alpha(opacity=90); }

#frame #left #panel{ width: 280px; margin-top: 10px; border: 1px solid #000000; filter:alpha(opacity=100,style=0); }

#footer { width: 750px; height: 20px; margin-top: 3px; font-family: Verdana, Arial; font-size: 8pt; text-align: center; background: #FFFFFF; }


/* CLASSES */

.contentpaneopen { width: 280px; font-family: Verdana, Arial; font-size: 10px; background: #666666 url(../images/light.gif); filter:alpha(opacity=100,style=0); }

.contentheading { width: 280px; background: #666666 url(/Default/extern/titel_home.gif); color: #666666; padding: 10px; font-family: Arial; font-size: 14px; font-weight: bold; filter:alpha(opacity=100,style=0); }

.blog { }

.moduletableorganisatie { font-family: Verdana, Arial; font-size: 10px; padding: 10px; : filter:alpha(opacity=100,style=0); }

Maar zoals je ziet op www.ronaldvandommele.be is er nog steeds geen verandering.

Als ik bij de #frame DIV dezelfde code gebruik als bij #panel, contentpaneopen, contentheading en moduletableorganisatie dan verandert er ook in IE niks, maar in Firefox is dan helemaal niets meer doorzichtig. Ik snap er niks van

[ Voor 0% gewijzigd door een moderator op 10-12-2006 12:54 . Reden: even code tags toegevoegd voor de leesbaarheid :) ]

[samo]

Wat ik destijds gedaan had om hetzelfde probleem op te lossen, is met meer divs werken:
Je maakt een 'container-div', waarin je 2 divs absoluut plaatst: 1x achtergrond met opacity, en daarover de voorgrond, dus zonder opacity... Beetje duidelijk?

[Mei]

Gewoon de afbeelding van de boom bewerken zodat het lijkt alsof de linker kolom transparant is? Werkt nog een stukje efficiënter ook, aangezien de browser de opacity niet hoeft uit te rekenen (niet dat je daar zo heel veel val zal merken, maargoed ). Opacity is gewoon nog een beetje beperkt. Het werkt momenteel alleen nog in Gecko-based browsers en Opera en het is zegmaar 'gedwongen' erfelijk.

[Verwijderd]

samo schreef op zondag 10 december 2006 @ 12:48:
Wat ik destijds gedaan had om hetzelfde probleem op te lossen, is met meer divs werken:
Je maakt een 'container-div', waarin je 2 divs absoluut plaatst: 1x achtergrond met opacity, en daarover de voorgrond, dus zonder opacity... Beetje duidelijk?

Momenteel heb ik dus het volgende
1 div genaamd frame met daarin een geneste div genaamd left. Left heeft de opacity op 90 staan, dus die is ietwat doorzichtig. In de div left is er nogmaals een divs gedefinieerd, genaamd "panel".

Panel bevat dan de classes contentpaneopen, contenheading en moduletableorganisatie.
Panel, contentpaneopen, contentheading en moduletableorganistaie hebben allemaal opacity op 100 staan. Dus helemaal niet doorzichtig. Toch komt het er nog verkeerd uit. Wat doe ik vereerd dan?

Als het niet lukt kan ik inderdaad eventueel die achtergrondafbeelding vervagen, maar de afbeelding die er nu opstaat is nog niet de definitieve dus daarmee kan ik nog niets aanvangen.

[samo]

Dus als ik het goed begrijp heeft div:left 90% opacity; dus ook alle child-elementen van div:left. Wat je dus moet doen is over div:left een nieuwe div maken, zonder achtergrond. In de div over div:left heen komt dan je content, die dus niet doorschijnend is.
Een ietwat uitgebreid voorbeeld zie je hier (in Firefox) (een school voorbeeldje), waar bijvoorbeeld de gradient met opacity over de achtergrond ligt, of bijvoorbeeld de navigatiebalk onderop.

Toch maar een voorbeeldje:

HTML:

<div id="container">
  <div id="element-container">
    <div id="element-background">
    </div>
    <div id="element-content">
       inhoud....
    </div>
  </div>
</div>

Cascading Stylesheet:

div#element-container {
  position: [zoals jij wilt]
}
div#element-background, div#element-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
div#element-background {
  -moz-opacity: 0.9;
}

[ Voor 33% gewijzigd door samo op 10-12-2006 15:15 ]

[Verwijderd]

Ik heb het eens geprobeerd (ik vond het wel wat onduidelijk) maar volgens mij lukt het nog steeds niet. heb nu alles teruggezet zoals van tevoren.

Dus nog even op een rijtje zetten wat ik precies wil bereiken:

een div#frame: achtergrondafbeelding
daarin een geneste div#left: achtergrondafbeelding in het grijs en opacity 90
daarin of daarop? een div die NIET doorzichtig is met daarin de inhoud-elementen.
is het hier de de daarin of daarop die het verschil maakt?

[samo]

Inderdaad, als de div met inhoud in de div is met opacity, wordt de inhoud ook doorzichtig. Als de div ernaast, en dus feitelijk erover ligt, houdt ie zn ondoorschijnendheid.

[Verwijderd]

Ik zal zien wat ik doe. Ik denk dat ik toch voor de Photoshop optie ga
toch bedankt

Jeroen

[killercow]

Je kunt eventueel ook een transparant PNG met alpha als achtergrond gebruiken.,

Ik gebruik trouwens voor de vraagteken popups op ilse.greentides.net ook zo iets.
Een div die transparant is, een een andere div met de tekst er boven op.