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。创建一个具有透明背景的画布，添加一些文本，旋转它并根据需要调整大小，然后降低图层的不透明度。

如果您希望它覆盖整个页面，请使用“水印”类创建一个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。拥有一个巨大的，不透明的图像覆盖您的网站当然不能做到。但幸运的是，有some hacks可以解决这个问题，如果你使用透明的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>

这应该有效。

Answer 4

如果你在kavendek的建议中向css添加“background-attachment：fixed”，你可以将背景图像“固定”到窗口中的指定位置。这样，无论用户在页面上滚动的位置，水印都将始终保持可见。

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

4 个答案: