我是C ++ / Cdeveloper，从不花时间在网页上工作。我想在某些页面的背景上以大写字母(随机或者对角线)放置文本。我希望能够阅读前景文本，也能够阅读"水印"。我知道这可能更多是颜色选择的功能。

我尝试做自己想做的事一直没有成功。我想这对于具有Web设计工具或者html知识的人来说非常简单。

解决方案

回答

我们可以使用水印制作图像，然后通过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>

那应该工作。

回答

如建议的那样，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。拥有巨大的，不透明的图像覆盖网站肯定不会。但是幸运的是，有一些技巧可以解决这个问题，如果我们确实使用透明png，那么我们很可能希望这样做。

回答

如果我们在上述kavendek的建议中将css添加为" background-attachment：fixed"，则可以将背景图像"固定"在窗口中的指定位置。这样，无论用户在页面上的何处滚动，水印都将始终保持可见。

就个人而言，我发现固定的背景图像在视觉上很烦人，但我听说网站所有者说，他们喜欢知道自己的徽标或者版权声明(大概是作为图像呈现)总是在用户的鼻子下面。

回答

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