Nodig: een up-to-date versie van Microsoft Internet Explorer (of andere browser)

 

 Hou er rekening mee dat opacity niet door alle browsers ondersteund wordt.

 

CSS Opacity (oftewel transparantie)

Opacity/transparantie is een zeer complex onderwerp. Als je er meer over wil weten, kan ik de site van Mandarin Design aanraden. Daar staat een uitgebreide verhandeling over de onderwerpen 'opacity' en 'transparency'. Degenen die niet zo goed zijn in het Engels wil ik graag een handje helpen door hieronder wat voorbeelden van 'opacity' te geven. Allereerst verwijs ik naar mijn tutorial over de Alpha Opacity filter van Microsoft, zodat je enigszins een idee hebt waar het over gaat.

Hieronder dan 4 dezelfde plaatjes met ieder een verschillende mate van opacity.

Opacity : 25, 50, 75, 100

 

Het meest rechtse plaatje (het origineel) heeft een opacity-waarde van 100. Met andere woorden: het is 100% zichtbaar. Er is geen sprake van transparantie. Het meest linkse plaatje heeft een opacity-waarde van 25. Hier zie je dus maar een kwart van het originele plaatje. En er tussenin zitten de waarden 50 en 75. Als ik er een plaatje aan had toegevoegd met de opacity-waarde 0, had je helemaal geen plaatje gezien. Dan zou de transparantie 100% geweest zijn.

Hieronder de code (van Mandarin Design):

<div style="width:250px;margin:0 auto;"> <span style="float:left;filter:alpha(opacity=25);-moz-opacity:.25;opacity:.25;"><img src="r2.jpg" width="50" height="50"></span> <span style="float:left;filter:alpha(opacity=50);-moz-opacity:.50;opacity:.50;"><img src="r2.jpg" width="50" height="50"></span> <span style="float:left;filter:alpha(opacity=75);-moz-opacity:.75;opacity:.75;"><img src="r2.jpg" width="50" height="50"></span> <span style="float:left;filter:alpha(opacity=100);-moz-opacity:1.0;opacity:1.0;"><img src="r2.jpg" width="50" height="50"></span> </div> </div>

In een andere tutorial ga ik op dit onderwerp door, want er valt nog veel meer over te vertellen.

* * *

 

Voorlopig laat ik hieronder zien wat je met opacity kan doen.

 

Plaatje1 van Mandarin Design Plaatje2 Plaatje3 Plaatje4 Plaatje5 Plaatje6 Plaatje7 Plaatje8 Plaatje9 Plaatje10 Plaatje11

Beweeg je muis over de plaatjes en zie hoe de opacity-filter van Microsoft van 40 (mate van doorschijnendheid) naar 100 (volledig zichtbaar) verandert. De opacity/transparantie werkt in ieder geval in IE6 en schijnt ook te werken in Mozilla/Firefox and Netscape 7. Opacity wordt niet ondersteund door de browser Opera.

Dit is de CSS-code voor bovenstaand plaatjesmenu:

tussen de style tags: img {border:0;} #menu {position:relative; top:0; height:100px;} #menu a:visited, #menu a {text-decoration:none; color:#d00; font-weight:bold;} #menu a:visited img, #menu a img{filter: alpha(opacity=40); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40); -moz-opacity: 0.40; opacity:0.4; } #menu a:hover {background-color:transparent; color:#f88;} #menu a span {display:none;} #menu a:hover span {display:block; position:absolute; top:50px; left:0; font-size:12px; height:18px; padding:4px; font-weight:normal; color:#DC143C;} #menu a:hover img { filter: alpha(opacity=100); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100); -moz-opacity: 1.00; opacity:1; } tussen de body tags: <div align=center> <div id="menu"> <a href="#"><img src="r3.jpg" width="50" height="50" alt="" title="" /><span>Plaatje1 van Mandarin Design</span></a> <a href="#"><img src="r5.jpg" width="50" height="50" alt="" title="" /><span>Plaatje2</span></a> <a href="#"><img src="v43.gif" width="50" height="50" alt="" title="" /><span>Plaatje3</span></a> <a href="#"><img src="v53.gif" width="50" height="50" alt="" title="" /><span>Plaatje4</span></a> <a href="#"><img src="r8.jpg" width="50" height="50" alt="" title="" /><span>Plaatje5</span></a> <a href="#"><img src="v1.gif" width="50" height="50" alt="" title="" /><span>Plaatje6</span></a> <a href="#"><img src="v23.gif" width="50" height="50" alt="" title="" /><span>Plaatje7</span></a> <a href="#"><img src="v27.gif" width="50" height="50" alt="" title="" /><span>Plaatje8</span></a> <a href="#"><img src="v66.gif" width="50" height="50" alt="" title="" /><span>Plaatje9</span></a> <a href="#"><img src="v69.gif" width="50" height="50" alt="" title="" /><span>Plaatje10</span></a> <a href="#"><img src="v147.gif" width="50" height="50" alt="" title="" /><span>Plaatje11</span></a> </div> </div>

De code is van Stu Nicholls.

Alle plaatjes op deze pagina zijn gratis ter beschikking gesteld door .

---

Zie ook mijn andere tutorials over opacity en MSIE filters.

 

Start | Tutorials | Korte Lesjes | CSS | Fonts | Filters | Links | Allerlei | Zoeken | PSP-varia | P-Filiaal