Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

opacity werkt niet op background color?

6 antwoorden
  • In navolging van [url=http://www.w3schools.com/Css/css_image_transparency.asp]een pagina op w3schools[/url] maakte ik [url=http://ysptemp.x10.bz/transptest.php]dit.[/url] De enige verandering is dat ik de background:url() vervang door background:color(). Daardoor wordt de tekst ineens ook gekleurd, en dat wil ik niet ): Hoe fix ik dit? (op pagina's als Hyves is het ze gelukt, maar ik snap niet hoe!) [/url]
  • Als je een container gedeeltelijk doorzichtig maakt dan gebeurd dit ook met de inhoud van die container, dus tekst of plaatjes. Als je dit niet wilt dan zal je een semi doorzichtige achtergrond plaatje moeten gebruiken. Dat moet dan een png zijn omdat dat op dit moment de enige plaatjes zijn die semi doorzichtig kunnen zijn en redelijk goed ondersteund zijn. Die maak je dan iets van 4 bij 4 pixels ofzo en herhaal je gewoon in de achtergrond. Je moet er wel rekening mee houden dat Internet Explorer 6 geen transparantie van PNG's ondersteund. Dat moet je dan oplossen met een "IE6 only" style sheet door gebruikte maken van "conditionele comments".
  • Haaaa! Ik heb het! (: [code:1:b67207266b]<html> <head> <style type="text/css"> .container{ position:relative; padding:12px; } .graybox{ position:absolute; top:0px; left:0px; right: 0px; bottom: 0px; background-color:#000; opacity:0.5; } .contentbox{ position:relative; top:0px; left:0px; right: 0px; bottom: 0px; color:#FFF; } </style> </head> <body> <div class="container"> <div class="graybox"></div> <div class="contentbox">blablablabla<br>blabla<br>blabla</div> </div> </body> </html>[/code:1:b67207266b] Voor zij die geinteresseerd zijn.[/code]
  • Afhankelijk van de browsers die je wil ondersteunen kun je ook gewoon gebruik maken van CSS3-gereedschappen die standaard geboden worden. In dit geval:[code:1:b85baec399]background-color:rgba(255,0,0,0.5);[/code:1:b85baec399]Lees ook [url=http://www.css3.info/opacity_rgba_and_compromise/]Opacity, RGBA and compromise[/url] (2007) op [url=http://www.css3.info/]CSS3.info[/url] - Bas
  • Ik heb zelf al heel wat tijd aan dit probleem besteed. En de oplossing van Drewster is de beste, een semi transparante png als achtergrond. Ook het 'resetten' van de transparantie door de inhoud in de stylesheet weer afzonderlijk een opacity van 100 te geven werkt overigens niet. Waarom niet is me overigens een raadsel omdat het regelrecht ingaat tegen een belangrijke CSS regel dat hoe specifieker een regel is, des te hoger de prioriteit. Zoals gezegd wordt dat niet ondersteunt door IE6 en lager, maar persoonlijk maak ik me daar niet druk over. IE6 wordt amper nog ondersteunt, ook niet door mij. (Tenzij het me echt niet lukt om dat iemand uit zijn hoofd te praten) Mocht je dat toch belangrijk vinden, kijk dan even op onderstaande website, ik heb goede ervaringen met die oplossing. http://koivi.com/ie-png-transparency/
  • De oplossing op de website die Gooly noemt werkt inderdaad, maar persoonlijk probeer ik te allen tijde het gebruik dat ob_start() te vermijden. De discussie over ob_start() zullen we hier maar niet gaan voeren, daar is genoeg over te vinden op het internet, en we komen er toch nooit uit. ;) Ter aanvulling op de methode die ik eerder noemde, [url=http://css-tricks.com/rgba-browser-support/]RGBa werkt in de volgende browsers[/url]: [list:8432d7bd49][*:8432d7bd49]Internet Explorer 9+ [*:8432d7bd49]Firefox 3.0+ [*:8432d7bd49]Chrome (alle) [*:8432d7bd49]Safari 3.0+ [*:8432d7bd49]Opera 10.0+[/list:u:8432d7bd49]Lees het artikel voor meer informatie. - Bas

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.