Ik zet met een probleem net als veel andere, maar heb tot nu toe nog geen oplossing kunnen vinden (twee uur Google).
Voor een divje wil ik een half-transparante achtergrond (50%). Okay geen probleem, dat fixen we met:
Dan maken we daarin een ander divje omdat ik de tekst wel gewoon 100% wil. Dan zou je denken dat je dat zou kunnen bereiken met:Code:filter:alpha(opacity=50); /* IE */ -moz-opacity:.5; /* Gecko */ opacity:.5; /* Opera */
Maar dat werkt dus niet... Ik wil zoveel mogelijk CSS gebruiken, dus het liefst hoor ik een andere oplossing dan een PNG met IE-hack.Code:filter:alpha(opacity=200); /* IE */ -moz-opacity:2; /* Gecko */ opacity:2; /* Opera */
Wie kan me helpen met dit probleem?
- Transparante DIV's
-
11-09-2007, 20:21 #1
- Berichten
- 301
- Lid sinds
- 18 Jaar
Transparante DIV's
-
11-09-2007, 23:12 #2Particulier
- Berichten
- 131
- Lid sinds
- 17 Jaar
Volgens mij werkt die opacity alleen op de inhoud van het element, en moet je de achtergrond 'faken':
Code:#div1 img{ filter:alpha(opacity=50); /* IE */ -moz-opacity:.5; /* Gecko */ opacity:.5; /* Opera */ }
Code:<div id="div1"> <img src="achtergrond.jpg" width="etc" height="etc" alt="" /> </div>
Het kan vast eleganter, maar dit was even een ideetje
-
12-09-2007, 17:05 #3Particulier
- Berichten
- 132
- Lid sinds
- 18 Jaar
Zo doe ik het ook. Dus eerst een transparante div met een bepaalde afmeting aanmaken en daaronder een div met de tekst en die dan relative erboven positioneren.
-
12-09-2007, 20:05 #4
- Berichten
- 301
- Lid sinds
- 18 Jaar
dat met positionering kan dus niet, want de content vlakken moeten rekbaar zijn, niet statisch
ik denk dat er momenteel niets anders opzit dan een 1x1 png...
-
19-09-2007, 12:51 #5Particulier
- Berichten
- 587
- Lid sinds
- 17 Jaar
Heb je wel een background-color?
Code:#1 { filter:alpha(opacity=50); /* IE */ -moz-opacity:.5; /* Gecko */ opacity:.5; /* Opera */ background-color: #kleur; }
Code:#2 { filter:alpha(opacity=200); /* IE */ -moz-opacity:2; /* Gecko */ opacity:2; /* Opera */ }
Code:<div id="1"> <div id="2"> <p>Hier de inhoud...</p> </div> </div>
Als dit ook niet lukt zou je hier een kijkje moeten nemen: http://www.mandarindesign.com/opacity.html hier wordt namelijk veel uitgelegd met betrekking tot het maken van transparante afbeeldingen en div´s in CSS. Mogelijk staat er wel iets tussen wat je zou helpen met het probleem.
Succes!Laatst aangepast door gast2676 : 19-09-2007 om 13:42
-
20-09-2007, 18:17 #6
- Berichten
- 301
- Lid sinds
- 18 Jaar
In ieder geval bedankt voor de moeite. Maar daar ligt het dus niet aan, heb gewoon een achtergrond ingesteld.
Ik heb ook vaker al Mandarin gelezen maar alles wat ik probeer werkt niet.
Plaats een
- + Advertentie
- + Onderwerp
Marktplaats
Webmasterforum
- Websites algemeen
- Sitechecks
- Marketing
- Domeinen algemeen
- Waardebepaling
- CMS
- Wordpress
- Joomla
- Magento
- Google algemeen
- SEO
- Analytics
- Adsense
- Adwords
- HTML / XHTML
- CSS
- Programmeren
- PHP
- Javascript
- JQuery
- MySQL
- Ondernemen algemeen
- Belastingen
- Juridisch
- Grafisch ontwerp
- Hosting Algemeen
- Hardware Info
- Offtopic