opacity

[blackeagle67]

Mijn vraag: is het mogelijk om een achtergrond van een div doorzichtig te maken maar dat de div binnen die div normaal te zien blijft?

 

[Goeroeboeroe]

Ja, min of meer.
Als je gebruik maakt van opacity, kun ook 'n afbeelding doorzichtig maken.
Je neemt 'n buitenste div met position: relative.
Daarbinnen zet je 'n div met de achtergrond, even groot als de buitenste div. Deze maak je doorzichtig.
Je zet er nog 'n tweede div in, die je over de eerste div heen zet met position of zo. In deze div zet je de inhoud.
Omdat de tweede div niet binnen de eerste staat, erft hij dus niet de opacity.
Als je als eenheid em neemt, kun je zelfs vergroten en verkleinen.

Omdat de code nogal veel is, geef ik 'n link naar het voorbeeld.
http://www.css-voorbeelden.nl/tekst/effecten/doorzichtigheid/tekst-031.html
Als je niet de hele uitleg wilt lezen kun je de code gewoon downloaden en rechtstreeks bekijken. (Uiteraard) moet je voor IE weer iets andere code gebruiken: 'n filter.

De tweede manier is beter, maar kan alleen voor effen kleuren worden gebruikt. Onderdeel van css3. Hierbij gebruik je rgba(): drie kleuren en alpha-kanaal (doorzichtigheid). (Uiteraard) moet je voor IE weer andere code gebruiken: 'n filter. rgba() en het IE-filter worden niet geërfd, dus de div binnen de div heeft nergens last van.
Ook weer te veel code om hier neer te zetten, dus weer 'n link:
Voorbeeld: http://www.css-voorbeelden.nl/tekst/effecten/doorzichtigheid/tekst-078.html
Kun je ook downloaden en al dan niet de uitleg lezen. Maar in dit geval zou ik wel de Bekende problemen even bekijken, want je kunt met deze problemen tekst volledig onzichtbaar maken in oudere browsers die wel css, maar geen rgba() kennen. En dat zijn niet eens zulke hele oude browsers. Is simpel te voorkomen, als je er maar even o let.
Op deze site kun je het simpele rgba() automatisch omzetten naar het volstrekt onleesbare IE-filter: http://kimili.com/journal/rgba-css-generator-for-internet-explorer

Edit: rgba werkt in IE 6, 7 en 8, Firefox 3.5 en nieuwer, Opera 10 en nieuwer, Safari en Google Chrome.
opacity werkt in alle iets nieuwere browsers, ook IE 6, en ook zonder -moz en zo ervoor.
(Voor IE heb je dus wel filters nodig, maar 't werkt, bedoel ik).

 

[blackeagle67]

He hartelijk bedankt voor de informatie en voorbeelden ik zal er thuis eens naar kijken.

 

[blackeagle67]

Dit ziet er geweldig uit met rgba maar ik heb moeite met enkele dingen.
zo wil ik de kolommen van de volgende site: http://matthewjamestaylor.com/blog/perfect-3-column.htm zwart doorzichtig maken 0.8 opacity d8 ik en dan blokken voor de menu's etc erin plaatsen die niet doorzichtig zijn. Nou gaat alles goed in Chrome maar in FF en IE8 zag ik een enkele keer opeens niks en anders lukte het mij niet met IE8 met de filters. Kan jij helpen? Ik heb een aangepaste versie van de volgende sites:

http://matthewjamestaylor.com/blog/perfect-3-column.htm
http://www.cssplay.co.uk/layouts/background.html

Hoewel dit ook nog niet goed gaat want er zit een witruimte rechts op de pagina. Ik kan eventueel later verwijzen naar de site online. Maar kan jij mij helpen met de filters voor IE?

 

[Goeroeboeroe]

Daar kan ik zonder code heel weinig van zeggen.
In Firefox werkt het pas vanaf 3.5.
zwart met 'n opacity van 0.8 is in rgba dus

rgba(00, 00, 00, 0.8)

Als ik dan naar http://kimili.com/journal/rgba-css-generator-for-internet-explorer ga
en het daar intyp, komt er voor IE het volgende uit:

filterrogidXImageTransform.Microsoft.gradient(startColorstr=#CC000000,endColorstr=#CC000000);zoom: 1;

Bij beide moet je dan nog toevoegen background {...}
De zoom: 1 is om IE 6 en 7 hasLayout te geven, die geweldige uitvinding van Microsoft die gelukkig is verdwenen in IE 8. Zonder hasLayout werkt 't filter niet.


Hmm, het eerste lachebekje is dus : p (zonder spaties)
Het tweede is : D (zonder spatie). Soms is 'n computer zo ongelooflijk dom...
In principe zou dit gewoon moeten werken, zonder verder enige invloed te hebben op de inhoud van de divs.