Ajouter un Watermark à ses Images grâce au CSS

Si vous souhaitez ajouter un logo ou un texte en filigrane sur les images de votre site internet, vous pouvez envisager une solution rapide et simple à mettre en oeuvre grâce au CSS. L’ajout d’un watermak, tatouage numérique en français, peut être réalisé en insérant votre image dans un DIV intégrant une image de fond. Les deux images sont ainsi superposées et il ne reste plus qu’à jouer sur l’opacité de l’image. On laisse ainsi apparaître le watermark.

le code HTML

<div class="divImage">
<div src="http://leblogduwebmaster.fr/wp-content/uploads/2013/03/nature.jpg" alt="image tatouée" width="300" height="202" class="imageTatouee" />
</div>

le code CSS

.divImage {
 background: #000 url(http://leblogduwebmaster.fr/wp-content/uploads/2013/03/crazy.jpg) no-repeat;
 width: 300px;
 height: 202px;
}

img.imageTatouee{
filter:alpha(opacity=25);
opacity:.25;
}

Voir l’exemple

un WaterMark avec un Texte

On peut aussi imaginer insérer un texte par-dessus une image grâce au CSS. Voici une solution possible:

le code HTML

<div class="divImage">
<img src="http://leblogduwebmaster.fr/wp-content/uploads/2013/03/nature.jpg" alt="image tatouée" width="300" height="202" />
<div class="tatouage">Mon WaterMark</div>
</div>

le code CSS

.divImage
{
display:block;
width:300px;
height:202px;
}
.tatouage
{
position:relative;
display:block;
top:-20px;
margin-left:10px;
color:white;
}

Voir l’exemple

Publié dans CSS

quand j’aurai le temps

  • les filtres wordpress
  • plugin wordpress et enregistrement de données
  • les wordpress custom post type
  • la bdd d'un blog wordpress
  • la balise more de wp
  • personnaliser une galerie wp
  • gérer les longueurs des extraits de wp
  • les animations css3
  • le memento symphony2
  • le squelette d'une page html5
  • liste sur plusieurs colonnes
  • le responsive design
  • exemple d'un jeu basique en html5
  • la réplication des bases de données
  • mettre en place une architecture en silo avec wp
  • parser un fichier xml (donc un rss) avec php5
  • mettre en place lightbox sans plugin
  • améliorer les performances de son wp
  • ajouter un bouton à l'éditeur de texte de wp
  • ...