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

mostrar imagen en html

Question

Soy desarrollador de C ++ / C # y nunca dediqué 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

Como se sugirió, un fondo png podría funcionar, o incluso simplemente un png absolutamente posicionado que se adapte a la página, pero usted está haciendo un comentario sobre cuál sería una buena herramienta para crear uno, si quiere ir 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 quieres que cubra toda la página, crea un div con la clase ''marca de agua'' y define su estilo como algo como:

.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 ajustarse, puede ir un poco más allá y agregar una imagen en ese div, y definir su estilo para que se ajuste (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 y no transparente que cubra su sitio definitivamente no funcionaría. Pero hay algunos trucos para evitar esto, afortunadamente, lo que probablemente querrás hacer si utilizas un png transparente.

Answer 2

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>

Eso debería funcionar.

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 he escuchado a los propietarios de los sitios decir que les encanta saber que su logotipo o aviso de derechos de autor (prestados 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, lo cual es bueno para las versiones de desarrollo / prueba de una página web.

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