15

我是一名 C++/C# 开发人员，从未花时间在网页上工作。我想在某些页面的背景上以大写字母（可能是随机和对角线）放置文本。我希望能够阅读前景文本并能够阅读“水印”。我知道这可能更多是颜色选择的功能。

我一直在尝试做我想做的事，但没有成功。我想这对于具有网页设计工具或 html 知识的人来说非常简单。

4

4 回答 4

27 
<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>
于 2010-03-21T10:57:56.273 回答
7

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

如果您希望它覆盖整个页面，请使用“水印”类创建一个 div，并将其样式定义为：

.水印
{
   背景图片：网址（image.png）；
   背景位置：中心中心；
   背景尺寸：100%；/* 仅限 CSS3，但如果你制作足够大的图像，则不是必需的 */
   位置：绝对；
   宽度：100%；
   高度：100%；
   边距：0；
   z 指数：10；
}

如果您真的希望图像拉伸以适应，您可以更进一步，将图像添加到该 div 中，并定义其样式以适应（宽度/高度：100%；）。

当然，这有一个非常重要的警告：IE6 和一些旧浏览器可能不知道如何处理透明 png。用一张巨大的、不透明的图片覆盖你的网站肯定不行。但是幸运的是，有一些技巧可以解决这个问题，如果您确实使用透明 png，您很可能会想要这样做。

于 2008-09-16T15:06:13.523 回答
3

如果您在上面kavendek的建议中将“背景附件：固定”添加到css中，您可以将背景图像“固定”到窗口中的指定位置。这样，无论用户在页面上的哪个位置滚动，水印都将始终可见。

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

于 2008-09-16T18:18:01.787 回答
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>

那应该行得通。

于 2008-09-16T01:36:09.883 回答