it-swarm-pt.tech

marca d'água de texto no site? como fazer isso?

Sou um desenvolvedor C++/C # e nunca passei muito tempo trabalhando em páginas da web. Eu gostaria de colocar o texto (talvez aleatoriamente e diagonalmente) em letras grandes no fundo de algumas páginas. Quero ser capaz de ler o texto do primeiro plano e também ler a "marca d'água". Eu entendo que provavelmente é mais uma função da seleção de cores.

Não tenho tido sucesso em minhas tentativas de fazer o que quero. Eu imagino que isso seja muito simples para alguém com as ferramentas de web design ou conhecimento de 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>

Isso permite que você use apenas texto como marca d'água - bom para versões de desenvolvimento/teste de uma página da web.

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

Como sugerido, um plano de fundo de png pode funcionar, ou mesmo apenas um png absolutamente posicionado com tamanhos para caber na página, mas você está perguntando em um comentário sobre qual seria uma boa ferramenta para criar um - se você quiser usar gratuitamente, tente GIMP . Crie uma tela com um fundo transparente, adicione algum texto, gire e redimensione como desejar e, em seguida, reduza a opacidade da camada a gosto.

Se você quiser que cubra a página inteira, faça um div com a classe 'marca d'água' e defina seu estilo como algo como:

. marca d'água 
 {
 background-image: url (image.png); 
 background-position: center center; 
 background-size: 100%;/* CSS3 apenas, mas não realmente necessário se você fizer uma imagem grande o suficiente */
 Posição: absoluta; 
 Largura: 100%; 
 Altura: 100%; 
 .] margem: 0; 
 Z-index: 10; 
} 

Se você realmente deseja que a imagem se estique para se ajustar, você pode ir um pouco mais além e adicionar uma imagem a esse div e definir seu estilo para se ajustar (largura/altura: 100%;).

Claro, isso vem com uma advertência muito importante: o IE6 e alguns navegadores antigos podem não saber o que fazer com PNGs transparentes. Ter uma imagem gigante e não transparente cobrindo seu site certamente não serviria. Mas existem alguns hacks para contornar isso, felizmente, o que você provavelmente desejará fazer se usar um png transparente.

7
Doug Kavendek

Você pode fazer uma imagem com a marca d'água e, em seguida, definir a imagem como plano de fundo via css.

Por exemplo:

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

Isso deve funcionar.

3
dawnerd

Se você adicionar "background-attachment: fixed" ao css na sugestão de kavendek acima, você pode "fixar" a imagem de fundo no local especificado na janela. Dessa forma, a marca d'água sempre permanecerá visível, independentemente de onde o usuário rolar na página.

Pessoalmente, acho que imagens fixas de fundo são visualmente irritantes, mas ouvi proprietários de sites dizerem que adoram saber que seu logotipo ou aviso de copyright (representado como uma imagem, provavelmente) está sempre bem debaixo do nariz do usuário.

2
eldgie