Transparante tekst over afbeelding
Ik dacht wat ervaring te hebben met css, maar dat blijkt toch niet zo. Ik wil graag transparante tekst over een afbeelding hebben. De afbeelding als background in een TD met daarover transparante tekst. Tot zover lukt het alleen met een block. Als ik dat niet doe, dan is de tekst niet scherp. Heeft hier iemand een idee over? Ik kan wel een image maken, maar het punt is dat de tekst steed anders zal zijn. (Dit i.v.m. het resultaat uit een SQL database)
tekst
</div>
of opacity niet ?
#tekst {
opacity:.80; // voor safari, opera enz
-moz-opacity:.80; // voor mozilla, firefox, netscape
filter:alpha(opacity=80); // voor ie
}
In dit voorbeeld gebruik ik een opacity van 80%. Niet tevreden? Gooi het getal een end omlaag. En met css kan je ook makkelijk te teksten uitlijnen, dus waarom moeilijk doen in php, en meer bandbreedte vragen door het plaatje te bewerken?
met het voorbeeld van Door kun je dan een tekst op het plaatje zetten in een DIV, SPAN of iets dergelijks.
Je krijgt dan zoiets:
<style type="text/css">
#tekst {
opacity:.80; // voor safari, opera enz
-moz-opacity:.80; // voor mozilla, firefox, netscape
filter:alpha(opacity=80); // voor ie
text-align:right;
padding-top:10px;
background-image:url('map/plaatje.jpg');
}
</style>
<div id="tekst">
hier de tekst, die rechts is uitgelijnd, 10px van top
</div>
Ik hoop dat dit werkt naar jouw idee ;)
Gewijzigd op 01/01/1970 01:00:00 door Mr Bob
Of php5
<html>
<head>
<style>
#tekst
{
float: left;
text-align: left;
width: 900px;
height: 159px;
opacity:.80; // voor safari, opera enz
-moz-opacity:.80; // voor mozilla, firefox, netscape
filter:alpha(opacity=80); // voor ie
text-align:left;
padding-top:0px;
}
</style>
</head>
<body>
<center>
<table border="1"><tr><td background="dba.gif" width="900" height="160">
<div id="tekst">
<font face="verdana, arial" size="20px"><b>Boeing 737-400<p><p>
</div>
<body>
<style type="text/css">
// je css
</style>
Doe dan in de tabel zelf de transparante ,
Gewijzigd op 01/01/1970 01:00:00 door dimi o
gebruik geen <font face="verdana, arial" size="20px"> maar regel dit in je css
jah , enkel je tekst stylen want wat is strak ?
Hoe strak de tekst is, hangt af van de browser en de opmaak waar je voor kiest. IE7 geeft tekst anti-aliased weer en dit is een stukje fijner dan FF en IE6. Maar ook hoe groter de font, hoe fijner de tekst eruit ziet.
robin schreef op 16.12.2007 15:11:
Of php5
wth lul jij? dit is pure html met css, wat heeft php hier mee te maken? en post aub niet dubbel
Tommy schreef op 17.12.2007 18:41:
wth lul jij? dit is pure html met css, wat heeft php hier mee te maken? en post aub niet dubbel
robin schreef op 16.12.2007 15:11:
Of php5
wth lul jij? dit is pure html met css, wat heeft php hier mee te maken? en post aub niet dubbel
Mompelt iets van dat je met php plaatjes kan bewerken....
Heb hem wel eens vaker bij zo'n soort vraag het zelfde antwoord zien geven, sloeg toen ook al nergens op..
Tommy schreef op 17.12.2007 20:37:
Heb hem wel eens vaker bij zo'n soort vraag het zelfde antwoord zien geven, sloeg toen ook al nergens op..
Oke... Daarom mopelde ik ook... Maar iid, het is niet echt een geweldig antwoord. Je kan dat bijna overal neer zetten.
www.deplane.nl/test8.html
In de css wordt afbeelding en tekst transparant en een gelijke afbeelding in de tabel brengt de afbeelding sterker terug.
oftewel:
<html>
<head>
<style>
b{
height:160;
float:left;
filter:alpha(opacity=20);
-moz-opacity:.20;
opacity:.20;
text-decoration:none;
text-align:right;
font-weight:bold;
font-family:arial;
font-size:65;
background-image:url('dba.gif');
}
</style>
</head>
<body>
<table border="0"><tr><td background="dba.gif" width="900" height="160">
<b>Deutsche British Airways
</td></tr></table>
</body>
</html>
Een ieder bedankt voor de adviezen.
Ik ben er een eind uit, de laatste definitieve poging is op In de css wordt afbeelding en tekst transparant en een gelijke afbeelding in de tabel brengt de afbeelding sterker terug.
oftewel:
<html>
<head>
<style>
b{
height:160;
float:left;
filter:alpha(opacity=20);
-moz-opacity:.20;
opacity:.20;
text-decoration:none;
text-align:right;
font-weight:bold;
font-family:arial;
font-size:65;
background-image:url('dba.gif');
}
</style>
</head>
<body>
<table border="0"><tr><td background="dba.gif" width="900" height="160">
<b>Deutsche British Airways
</td></tr></table>
</body>
</html>
Een ieder bedankt voor de adviezen.
Kun je niet een div in in je td stoppen en die div vullen met de tekst en daar de transparantie instellen???
Dat via de td valt in zo verre tegen dat alles vervaagd. een tweede keer laden brengt de sterkte van de foto terug en de tekst tranaparant
Een div met het achtergrondplaatje als background.
Daarin een PNG zetten die je dynamisch genereert met bijv 50% transparantie.
Een CSS hack toepassen om het ook in IE6 te laten werken.
Tot nu toe heb ik het zo gedaan
H1{
height:130;
float:left;
filter:alpha(opacity=30);
-moz-opacity:.30;
opacity:.30;
text-decoration:none;
text-align:right;
font-weight:bold;
font-family:tahoma;
font-size:65;
background-image:url('airbus.gif');
}
(is dit voldoende voor die hack?)
en dan nog een keer het plaatje in een tabel.
Kijk eens naar www.deplane.nl/factsheet.php en zoek een wat in de selectbox.
ik heb ook nog een ander proleem bedacht met die selectbox
http://www.phphulp.nl/php/scripts/3/481/