mardi 27 août 2013

Iframe semi-transparent avec image d'arrière-plan

Un DIV contenant l'image satellite d'arrière-plan et un iframe affichant un texte par dessus (Vigilances Météo France pour les Petites Antilles et la Guyane). Je n'ai pas mis la Guyane dans l'image satellite parce qu'étant loin, l'image aurait été trop grande.

On remarquera le style de l'iframe contenant notamment background-color: rgba(255, 255, 255, 0.7)
C'est RGBA qui permet de régler la transparence ou l'opacité. Plus le chiffre est faible plus l'image est transparente. Je pense qu'on peut l'utiliser aussi avec un tableau ou un DIV.
line-height: 20px; c'est l'interligne du texte qui sera affiché dans l'iframe. timelabel=0 Pas d'heure indiquée. timelabel=1 L'heure est indiquée.


<div style="background-image: url(http://wublast.wunderground.com/cgi-bin/WUBLAST?lat=15&amp;lon=-62&amp;zoom=4&amp;width=600&amp;height=700&amp;key=sat_ir4&amp;basemap=1&amp;gtt=60&amp;num=1&amp;timelabel=0&amp;delay=25&amp;borders=1&amp;theme=WUBLAST_WORLD&amp;extension=jpg&amp;proj=ll); border: 0px solid black; height: 700px; text-align: center; width: 600px;">
<iframe frameborder="0" height="700px" name="vigilance" scrolling="no" src="http://www.meteo.gp/donnees/bulletin/special/alert_gene_libre_2007.php" style="background-color: rgba(255, 255, 255, 0.7); color: #575757; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px; padding-top: -10px; text-align: center;" title="Vigilances-Watches" width="600"></iframe>
</div>

Aucun commentaire:

Enregistrer un commentaire