it-swarm-es.tech

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

Soy desarrollador de C++/C # y nunca pasé tiempo trabajando en páginas web. Me gustaría poner texto (al azar y diagonalmente quizás) en letras grandes en el fondo de algunas páginas. Quiero poder leer el texto de primer plano y también poder leer la "marca de agua". Entiendo que probablemente sea más una función de selección de 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 el conocimiento html.

13
Tim
<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>
25
user136776

Como se sugirió, un fondo png podría funcionar, o incluso un png absolutamente posicionado que se ajuste a la página, pero usted está preguntando en un comentario sobre cuál sería una buena herramienta para crear una, si quiere usar gratis, intente GIMP . Cree un lienzo con un fondo transparente, agregue texto, gírelo y cambie el tamaño como desee, y luego reduzca la opacidad de la capa al gusto.

Si desea que cubra toda la página, haga un div con la clase 'marca de agua' y defina su estilo de la siguiente manera:

. marca de agua 
 {
 imagen de fondo: url (image.png); 
 posición de fondo: centro centro; 
 tamaño de fondo: 100%/* CSS3 solamente, pero no es realmente necesario si crea una imagen lo suficientemente grande */
 Posición: absoluta; 
 Ancho: 100%; 
 Altura: 100%; 
 margen: 0; 
 índice z: 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 ciertamente no lo haría. Pero hay algunos hacks para solucionar esto, afortunadamente, lo que probablemente querrás hacer si utilizas un png transparente.

7
Doug Kavendek

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.

3
dawnerd

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

Personalmente, considero que las imágenes de fondo fijas son visualmente molestas, pero he oído a los propietarios del sitio decir que les encanta saber que su logotipo o aviso de copyright (presumiblemente como una imagen) siempre está justo debajo de la nariz del usuario.

2
eldgie