filigrana di testo sul sito web? come farlo?

Question

Sono uno sviluppatore di C++/C# e non ho mai speso tempo a lavorare sulle pagine web. Vorrei mettere il testo (a caso e in diagonale, forse) a caratteri grandi sullo sfondo di alcune pagine. Voglio essere in grado di leggere il testo in primo piano e anche essere in grado di leggere la "filigrana". Capisco che è probabilmente più di una funzione di selezione del colore.

Sono stato infruttuoso nei miei tentativi di fare quello che voglio. Immagino che questo sia molto semplice per qualcuno con gli strumenti di web design o la conoscenza html.

Answer 1

È possibile creare un'immagine con la filigrana e quindi impostare l'immagine come sfondo tramite css.

Ad esempio:

<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> 

che dovrebbe funzionare.

Answer 2

Come suggerito, uno sfondo png potrebbe funzionare, o anche solo un png posizionato in modo assoluto per adattarsi alla pagina, ma stai chiedendo in un commento su quale sarebbe un buon strumento per crearne uno - se vuoi vai gratis, prova con GIMP. Crea una tela con uno sfondo trasparente, aggiungi del testo, ruotala e ridimensionala come desideri, quindi riduci l'opacità del livello a piacere.

Se ci si vuole per coprire l'intera pagina, fare un div con la 'filigrana' di classe e definire il suo stile come qualcosa di simile:

 
.watermark 
{ 
    background-image: url(image.png); 
    background-position: center center; 
    background-size: 100%; /* CSS3 only, but not really necessary if you make a large enough image */ 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    z-index: 10; 
} 

Se davvero si vuole l'immagine di allungare per adattarsi , puoi andare un po 'oltre e aggiungere un'immagine in quel div e definirne lo stile adatto (larghezza/altezza: 100%;).

Naturalmente, questo ha un avvertimento molto importante: IE6 e alcuni vecchi browser potrebbero non sapere cosa fare con png trasparenti. Avere un'immagine gigante non trasparente che copre il tuo sito sarebbe sicuramente non fare. Ma ci sono some hacks per aggirare questo, per fortuna, che molto probabilmente vorrai fare se usi un png trasparente.

Answer 3

Se si aggiunge "background-attachment: fixed" al css nel suggerimento di kavendek sopra, è possibile "pin" l'immagine di sfondo nella posizione specificata nella finestra. In questo modo, la filigrana rimarrà sempre visibile, indipendentemente da dove l'utente scorre sulla pagina.

Personalmente, trovo che le immagini di sfondo fissate siano visivamente fastidiose, ma ho sentito i proprietari di siti dire che amano sapere che il loro logo o avviso di copyright (reso come un'immagine, presumibilmente) è sempre proprio sotto il naso dell'utente.

Answer 4

<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> 

Questo consente di utilizzare solo il testo come filigrana, valido per le versioni di sviluppo/test di una pagina Web.

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