filigrane de texte sur le site Web? comment faire?

Je suis une C++/C# développeur et jamais passé du temps à travailler sur des pages web. Je voudrais mettre du texte (au hasard et en diagonale peut-être), en grosses lettres sur l'arrière-plan de certaines pages. Je veux être en mesure de lire le texte en avant-plan et également être en mesure de lire le "filigrane". Je comprends que c'est probablement plus d'une fonction de sélection de couleur.

J'ai échoué dans mes tentatives de faire ce que je veux. J'imagine que cela est très simple pour quelqu'un avec les outils de conception web ou des connaissances en html.

source d'informationauteur Tim

  1. 23
    <style type="text/css">
#watermark {
  color: #d0d0d0;
  font-size: 200pt;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  z-index: -1;
  left:-100px;
  top:-200px;
}
</style>

    Cela vous permet d'utiliser juste le texte en filigrane - bon pour la dev/test versions d'une page web.

    <div id="watermark">
<p>This is the test version.</p>
</div>
  2. 7

    Comme l'a suggéré, un png en arrière-plan pourrait fonctionner, ou même juste un positionnement absolu png que tailles pour s'adapter à la page, mais vous êtes à poser dans un commentaire à propos de ce qui serait un bon outil pour créer un -- si vous voulez aller avec gratuitement, essayez GIMP. Créer une toile avec un fond transparent, ajouter du texte, faire pivoter et redimensionner comme vous le souhaitez, puis de réduire l'opacité du calque à votre goût.

    Si vous voulez de couvrir l'ensemble de la page, faire un div avec la classe de filigrane et de définir son style en tant que quelque chose comme:

    .en filigrane 
{ 
background-image: url ("image.png); 
background-position: center center; 
background-size: 100%; /* CSS3 uniquement, mais pas vraiment nécessaire si vous faites une assez grande image */
position: absolute; 
width: 100%; 
hauteur: 100%; 
margin: 0; 
z-index: 10; 
}

    Si vous voulez vraiment l'image afin de l'étirer pour s'adapter, vous pouvez aller un peu plus loin et ajouter une image dans la div, et de définir son style pour s'adapter (largeur/hauteur:100%;).

    Bien sûr, cela vient avec une jolie mise en garde importante: IE6 et certains navigateurs plus anciens peuvent ne pas savoir quoi faire avec la transparence des png. Avoir un géant, non transparentes de l'image de couverture de votre site certainement pas faire. Mais il y a certains hacks pour contourner ce problème, heureusement, vous aurez plus de chances voulez faire si vous utilisez une image png transparente.

  3. 3

    Vous pourriez faire une image avec le filigrane et ensuite définir l'image comme fond via le css.

    Par exemple:

    <style type="text/css">
.watermark{background:url(urltoimage.png);}
</style>
<div class="watermark">
<p>this is some text with the watermark as the background.</p>
</div>

    Qui devrait fonctionner.

  4. 2

    Si vous ajoutez "background-attachment: fixed" pour le css dans kavendek la suggestion ci-dessus, vous pouvez "épingler" l'image d'arrière-plan à l'emplacement spécifié dans la fenêtre. De cette façon, le filigrane sera toujours visible, peu importe où l'utilisateur fait défiler la page.

    Personnellement, je trouve l'arrière-plan fixe des images visuellement gênant, mais j'ai entendu parler du site-les propriétaires disent qu'ils aiment savoir que leur logo ou avis de droit d'auteur (rendu comme une image, sans doute) est toujours droit, en vertu de l'utilisateur du nez.