<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body { /* définition de la page */
margin:0% ; /* marge extérieure */
padding:0% ; /* marge intérieure */
background:50px 1px url(dragon2.gif) no-repeat ; /* dragon en image
de fond */
background-color: #E79EE7 ; /* couleur du fond de page */
color:black} /* couleur de la police */
.boite { /* boite centrale affichant une couleur de fond */
position:absolute ; /* celle-ci est en position absolue */
top:10% ; /* à 10% du haut de la boite parent (ici la page)
*/
left:25% ; /* et à 25% de la gauche */
padding:0% ; /* marge intérieure */
margin:0% ; /* marge extérieure */
width:50% ; /* largeur 50% de la boite parent (ici la page) */
border:1px solid black ; /* bordure de la boite */
height:200% ; /* hauteur de la boite par rapport à la boite
parent (ici la page) */
background:url(transparence-fond2.gif)} /* image semi-transparente
en fond de boite */
</style>
</head>
<body>
<div class="boite"> <!-- affichage de la boite recouvrant
le dragon -->
<p>contenu quelconque de la boite.</p>
<p>contenu quelconque de la boite.</p>
<p>contenu quelconque de la boite.</p>
<p>contenu quelconque de la boite.</p>
</div>
</body>
</html>
COMMENTAIRES
Ce second script est à la fois plus simple et plus efficace.
Il est également basé sur 2 images. Mais au lieu que ce soit celle du dragon normal et celle d'une aile modifiée, il s'agit ici du dragon normal et d'un fond de boite semi-transparent.
- On va d'abord placer l'image du dragon comme image de fond dans le body. On ne peut alors en modifier la taille, qui est forcément la taille originale. On pourrait donc aussi la placer dans une boite placée en fond d'écran, et dimensionnée alors comme on le souhaite. Les 2 sont possibles. Ici, l'image est bien en fond d'écran, pas dans une boite.
- On place alors une boite sur le body, à un emplacement quelconque, mais qui recouvre en partie ou totalement l'image du dragon. Cette boite à elle même une image de fond. Celle-ci fait 10 pixels sur 10 pixels, et doit être créée sous un logiciel de dessin gérant les GIF transparents. On remplis le carré de 10X10 de blanc, puis on efface 1 pixel sur 2, comme pour un damier d'échec. On sauvegarde enfin le résultat en GIF transparent. Le carré blanc devient à demi transparent. Répété sur toute la boite, il la recouvre intégralement, et crée un effet d'atténuation de la couleur du fond. Si celle-ci est rouge, on obtiendra un rouge très claire, si celle-ci est verte, on obtiendra un vert très clair, etc....
Cette fois, on a un vrai effet de transparence, plus simple à gérer que dans le précédent exemple.
Pour télécharger les 2 images : dragon | carré semi-transparent blanc.
Marche avec IE 5.0 et plus, avec les navigateurs Gecko (Netscape 6 et +, Mozilla,...) ou Opéra. Ne marche pas avec Netscape 4.