网站上的文字水印？怎么做？

Question

我是一名C++/C#开发人员,从不花时间在网页上工作.我想在一些页面的背景中以大字母放置文本(可能是随机和对角).我希望能够阅读前景文本,并能够阅读"水印".我知道这可能更多的是颜色选择的功能.

我试图做我想做的事情是不成功的.我认为这对于拥有网页设计工具或HTML知识的人来说非常简单.

Answer 1

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

这使您可以仅使用文本作为水印 - 适用于网页的开发/测试版本.

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

Answer 2

正如所建议的那样,png背景可以工作,或者甚至只是一个绝对定位的png,其尺寸适合页面,但是你在评论什么是一个很好的工具来创建一个 - 如果你想免费使用,试试GIMP.创建一个具有透明背景的画布,添加一些文本,旋转它并根据需要调整大小,然后降低图层的不透明度.

如果你想要它覆盖整个页面,请使用"watermark"类创建一个div,并将其样式定义为:

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

如果你真的希望图像拉伸以适应,你可以更进一步,并在该div中添加一个图像,并定义其样式(宽度/高度:100%;).

当然,这有一个非常重要的警告:IE6和一些旧浏览器可能不知道如何处理透明png.拥有一个巨大的,不透明的图像覆盖您的网站肯定不会.但幸运的是,有一些黑客可以解决这个问题,如果你使用透明的png,你最有可能想要这样做.

Answer 3

您可以制作带有水印的图像，然后通过 css 将图像设置为背景。

例如：

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

那应该有效。