Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

[CSS] Transparante DIV: tekst niet transparant

10 antwoorden
  • [code:1:eeb0ec53ef] #boxje { width: 200px; height: auto; z-index:5; border: 1px solid black; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:10px; color:#000000; text-align:right; vertical-align:top; background-image:url(test.gif); filter:alpha(opacity=33); -moz-opacity:.33; opacity:.33; } [/code:1:eeb0ec53ef] Bovenstaande code gebruik ik in mijn style.css om een transparante DIV box te maken, alleen wil ik niet dat de tekst in deze DIV dan ook transparant wordt. In mijn HTML pagina staat bijvoorbeeld het volgende: [code:1:eeb0ec53ef] <div id="boxje">Blaat, blaat. Hier komt de tekst die niet transparant moet worden weergegeven, maar dit gebeurt wel.</div> [/code:1:eeb0ec53ef] Hoe los ik dit op? Ik heb geprobeerd een andere box zonder achtgergrond er bovenop te plaatsen, maar dat werkte niet, omdat de onderste box dan niet de grootte van box erboven had, omdat hiet geen inhoud in zat. Ik hoop dat het duidelijk is. Alvast bedankt voor de reacties en het meedenken.
  • deze code: [code:1:d1f19f5d0e]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Untitled</title> <style type="text/css"> #boxje { width: 200px; height: auto; z-index:5; border: 1px solid black; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:10px; color:#000000; text-align:right; vertical-align:top; background-image:url(test.gif); filter:alpha(opacity=33); -moz-opacity:.33; opacity:.33; } </style> </head> <body> <div id="boxje"> Blaat, blaat. Hier komt de tekst die niet transparant moet worden weergegeven, maar dit gebeurt wel. </div> </body> </html> [/code:1:d1f19f5d0e] geeft bij mij gewoon een transparante div met leesbare tekst,... ik snap dus niet wat je probleem is... heb je anders een online voorbeeld? dit werkt in IE, FF en Opera...
  • Bedankt voor je reactie.[quote:9f8dff361a="s.Mighty"]deze code geeft bij mij gewoon een transparante div met leesbare tekst,... ik snap dus niet wat je probleem is... heb je anders een online voorbeeld? dit werkt in IE, FF en Opera...[/quote:9f8dff361a] Dat klopt, de tekst wordt ook wel weergegeven. Alleen is de tekst ook transparant, net zoals de rest van de DIV zoals de border en de background. Ik wil juist dat de tekst dit niet is en dat de tekst gewoon zwart is.
  • [quote:f7dccebf0e="Klaasje"][code:1:f7dccebf0e] #boxje { ... background-image:url(test.gif); filter:alpha(opacity=33); -moz-opacity:.33; opacity:.33; } [/code:1:f7dccebf0e] Hoe los ik dit op? [/quote:f7dccebf0e] Opacity verwijderen. De background veranderen door een PNG met alpha transparancy. Enige nadeel is dat IE6 het (nog) niet ondersteund. IE7 wel.
  • [quote:be94fd3aaf="h4xX0r"][quote:be94fd3aaf="Klaasje"][code:1:be94fd3aaf] #boxje { ... background-image:url(test.gif); filter:alpha(opacity=33); -moz-opacity:.33; opacity:.33; } [/code:1:be94fd3aaf] Hoe los ik dit op? [/quote:be94fd3aaf] Opacity verwijderen. De background veranderen door een PNG met alpha transparancy. Enige nadeel is dat IE6 het (nog) niet ondersteund. IE7 wel.[/quote:be94fd3aaf]Bednakt voor je reactie, maar is er geen andere mogelijkheid? Ik ben bang dat het grootste gedeelte van de bezoekers van m'n site nog IE6 of zelfs IE5 gebruiken! Mijn dank zou groot zijn :)
  • Wat gebeurt er als je de transparency van de tekst in 'boxje' uitzet? D.w.z. naast de transparency/opacity op #boxje ook definiëren op #boxje p (o.i.d.)
  • kun je niet nog een div in het #boxje zetten? waar de opacity 0 is ?
  • Dat is wat ik zeg, maar dan zonder [url=http://en.wikipedia.org/wiki/Divitis]overbodige div[/url]...
  • Wederom bedankt voor de reacties. Ik heb het volgende geprobeerd:[code:1:b440a12ef7] #boxje p { z-index:200; color: #000000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:10px; filter:alpha(opacity=0); -moz-opacity:.0; opacity:.0; } [/code:1:b440a12ef7] En ook:[code:1:b440a12ef7] #boxje p { z-index:200; color: #000000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:10px; filter:alpha(opacity=100); -moz-opacity:1; opacity:1; } [/code:1:b440a12ef7] Maar dit had beide geen resultaat. (de tekst in m'n div heb ik uiteraard tussen <p> en </p> gezet. Ook een extra div werkte niet, maar dit had ik overigens al geprobeerd. Sorry dat ik dat niet gemeld had. Wie heeft er nog andere suggesties?
  • Had het vermoeden dat h4xX0r gelijk had, maar kon denk ik geen kwaad te proberen :wink: Beetje zelf googelen doet wonderen... Zoeken op [url=http://www.google.nl/search?q=css+opacity+inheritance]css opacity inheritance[/url] levert bijv. op: http://developer.mozilla.org/en/docs/Useful_CSS_tips:Color_and_Background

Beantwoord deze vraag

Weet jij het antwoord op deze vraag? Registreer of meld je aan met je account

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.