Nodig: een up-to-date versie van Microsoft Internet Explorer.
(Misschien werkt dit ook in Mozilla Firefox).

 

   Hou er rekening mee dat webpagina's met CSS-stijlen niet door alle browsers op dezelfde manier worden weergegeven.

 

Transparant tekstvak (CSS in-line style)

In mijn Paint Shop Pro-les heb ik uitgelegd hoe je een transparant tekstvak maakt. Maar zonder beeldbewerkingsprogramma kun je ook een transparante box maken. Zie hieronder een wit tekstvakje op een donkerrode achtergrond. Dit is gemaakt met een CSS-code.

Transparante box met opacity-waarde 50

* * *

Nog een voorbeeld van een wit transparant tekstvakje op een zwart-wit foto:

Ochtendmist in Florida
3 februari 2005
Foto is van Mr Noded

De code:

<DIV align="center"> <div style="width:491px;height:325px;background:url(floridafog.jpg)"> </div> <p style="width:200px;text-align:center;border:1px solid purple;padding:5px;font-weight:bold;font-size: 8pt; position:relative;top:-85px;left:130px;color:black;background:white;filter:alpha(opacity=50);-moz-opacity:.50;opacity:.50;">Ochtendmist in Florida<BR>3 februari 2005<BR> Foto is van <A href="http://www.noded.com/noded/" target="_blank">Mr Noded</A> </p> </DIV>

* * *

Een boxje zonder opacity op een transparante achtergrond:

Verboden aan te plakken

De code:

<div style="width:358px;height:269px;filter:alpha(opacity=50);-moz-opacity:.50;opacity:.50;background:url(verbot.jpg)"> </div> <div style="width:200px;border:1px solid purple;padding:5px;font-weight:normal;position:relative;top:-69px;left:0px;color:white;background:url(verbot.jpg)"> Verboden aan te plakken </div>

* * *

Met dank aan Mandarin Design.

---

Zie ook mijn andere opacity tutorials:

Opacity - CSS
Opacity - Javascript
Gradual Highlight Image Script - CSS/Javascript
Opacity en tekst, deel 1 - CSS
Opacity en tekst, deel 2 - CSS
Opacity en tekst, deel 3 - CSS
Opacity: afbeelding en tekst - CSS
Alpha/Opacity Alg.
Emboss/Engrave/Opacity filters
Transparant venster - PSP
Transparant balkje - PSP

 

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