plaatjes en/of achtergrond transparant maken

Info 
Door: putbruy Moeilijkheidsgraad: 1/3
Views:35.182Reacties: 8(Bekijken)
  Log in om zelf te reageren
 Waardering:4.3/10 (3 stemmen)



Een eenvoudige manier om in css bepaalde plaatjes of kleurvlakken een transparantie te geven.
Zet dit tussen je <head></head> tags bij je <style type="text/css"> of in je externe stylesheet:

#Code
1
2
3
4
5
.transparant {
opacity:.50;
filter: alpha(opacity=50);
 -moz-opacity: 0.5;
 }

en dit plaats je op de gewenste locatie in je <body>:

#Code
1
<img src="jouwafbeelding.jpg" class="transparant">

en voilà een semi-transparante afbeelding.
Je kan desgewenst de -moz-opacity:*.*; (voor FF) en de filter.alpha(opacity=**) (voor IE) en opacity:.**; voor Opera(laatste versies) laten varieren van 0 tot 100 (voor FF van 0.0 tot 1.0)(Opera van .00 tot 1.00) voor méér of minder transparantie.
Voor de backgroundcolor transparant te maken gebruik je deze code:
#Code
1
2
3
4
5
6
.transparant {
opacity:.50;
filter: alpha(opacity=50);
 -moz-opacity: 0.5;
background-color: #000;
}

en in je body dan:
#Code
1
]<div class="transparant">inhoud van deze div met een transparante achtergrondkleur</div>

leuk en toch niet zo moeilijk.

8 reacties
jorgdevries Geplaatst op 07-07-2010 om 22:06
 

Regular
opacity:.50; is nergens voor nodig, die kun je wel weglaten ;)
Verder wel mooie tutorial...
webs Geplaatst op 22-06-2009 om 23:50
 

Regular
]<div class="transparant">inhoud van deze div met een transparante achtergrondkleur</div>
putbruy Geplaatst op 16-04-2007 om 12:11
 

Regular
wil je niet-transparante tekst op het vlak zetten moet je er een div met absolute positionering over of tussen plaatsen bv.
<div class="transparant"><div id="absoluutgepositioneerd">niet transparante tekst</div></div>
takje Geplaatst op 08-04-2007 om 13:52
 

Regular
Hoe kun je er dan ook over typen??
Kris Geplaatst op 29-01-2007 om 20:31
 

Moderator
Ik wist dat het mogelijk was met afbeeldingen, maar dat het ook met divs ging wist ik niet. :)

Pagina 1 2 

Om te reageren moet je ingelogd zijn.
Nog niet geregistreerd? Doe dat dan nu!


Terug naar gewone pagina

Websitemaken wordt gehost door Nucleus.be, uw Hosting Solution Builder