marca de agua de texto en el sitio web? ¿cómo hacerlo?

Question

Soy desarrollador de C++/C# y nunca dediqué tiempo a trabajar en páginas web. Me gustaría poner texto (al azar y diagonalmente) en letras grandes en el fondo de algunas páginas. Quiero poder leer el texto en primer plano y también poder leer la "marca de agua". Entiendo que probablemente sea más una función de la selección del color.

No he tenido éxito en mis intentos de hacer lo que quiero. Me imagino que esto es muy simple para alguien con las herramientas de diseño web o conocimiento html.

Answer 1

Puede hacer una imagen con la marca de agua y luego establecer la imagen como fondo a través de css.

Por ejemplo:

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

que debería funcionar.

Answer 2

Según lo sugerido, un fondo png podría funcionar, o incluso simplemente un png completamente posicionado que se adapte a la página, pero usted está preguntando en un comentario sobre cuál sería una buena herramienta para crear uno, si quiere ve con gratis, prueba GIMP. Cree un lienzo con un fondo transparente, agregue texto, rótelo y cambie el tamaño como desee, y luego reduzca la opacidad de la capa al gusto.

Si desea desea que cubra toda la página, hacer un div con la 'marca de agua' clase y definir su estilo como algo parecido a:

 
.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; 
} 

Si realmente desea que la imagen se estire para adaptarse , puede ir un poco más allá y agregar una imagen en ese div, y definir su estilo para encajar (ancho/alto: 100%;).

Por supuesto, esto viene con una advertencia bastante importante: IE6 y algunos navegadores antiguos pueden no saber qué hacer con png transparentes. Tener una imagen gigante, no transparente cubriendo su sitio sería ciertamente no hacer. Pero hay some hacks para evitar esto, afortunadamente, lo que probablemente querrás hacer si utilizas un png transparente.

Answer 3

Si agrega "background-attachment: fixed" al css en la sugerencia de kavendek anterior, puede "fijar" la imagen de fondo a la ubicación especificada en la ventana. De esta forma, la marca de agua siempre permanecerá visible independientemente de dónde se desplace el usuario en la página.

Personalmente, considero que las imágenes de fondo fijas son visualmente molestas, pero escuché a los propietarios de sitios decir que les encanta saber que su logotipo o aviso de derechos de autor (presumiblemente como imagen) siempre está justo debajo de la nariz del usuario.

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> 

Esto le permite usar solo texto como marca de agua - bueno para las versiones de desarrollo/prueba de una página web.

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