Html 网站上的文字水印？怎么做？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/68569/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
text watermark on website? how to do it?
提问by Tim
I am a C++/C# developer and never spent time working on web pages. I would like to put text (randomly and diagonally perhaps) in large letters across the background of some pages. I want to be able to read the foreground text and also be able to read the "watermark". I understand that is probably more of a function of color selection.
我是一名 C++/C# 开发人员，从不花时间在网页上工作。我想在某些页面的背景中以大字母（可能是随机和对角线）放置文本。我希望能够阅读前景文本，也能够阅读“水印”。我知道这可能更多是颜色选择的功能。
I have been unsuccessful in my attempts to do what I want. I would imagine this to be very simple for someone with the web design tools or html knowledge.
我尝试做我想做的事一直没有成功。我想这对于具有网页设计工具或 html 知识的人来说非常简单。
回答by user136776
<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>
This lets you use just text as the watermark - good for dev/test versions of a web page.
这使您可以仅使用文本作为水印 - 适用于网页的开发/测试版本。
<div id="watermark">
<p>This is the test version.</p>
</div>
回答by Doug Kavendek
As suggested, a png background could work, or even just an absolutely positioned png that sizes to fit the page, but you are asking in a comment about what would be a good tool to create one -- if you want to go with free, try GIMP. Create a canvas with a transparent background, add some text, rotate it and resize as you'd like, and then reduce the layer's opacity to taste.
正如所建议的，png 背景可以工作，或者甚至只是一个绝对定位的 png 大小适合页面，但您在评论中询问什么是创建一个的好工具 - 如果您想免费使用，试试GIMP。创建一个带有透明背景的画布，添加一些文本，根据需要旋转它并调整大小，然后降低图层的不透明度以适应口味。
If you'd want it to cover the whole page, make a div with the class 'watermark' and define its style as something like:
如果您希望它覆盖整个页面，请使用“水印”类创建一个 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;
}
If you really want the image to stretch to fit, you can go a little further and add an image into that div, and define its style to fit (width/height:100%;).
如果您真的希望图像拉伸以适合，您可以进一步将图像添加到该 div 中，并定义其样式以适合（宽度/高度：100％；）。
Of course, this comes with a pretty important caveat: IE6 and some old browsers might not know what to do with transparent pngs. Having a giant, non-transparent image covering your site would certainlynot do. But there are some hacksto get around this, luckily, which you'll most likely want to do if you do use a transparent png.
当然，这有一个非常重要的警告：IE6 和一些旧浏览器可能不知道如何处理透明 png。拥有一个巨大的、不透明的图像覆盖您的网站肯定是行不通的。但是幸运的是，有一些技巧可以解决这个问题，如果您确实使用透明 png，您很可能想要这样做。
回答by dawnerd
You could make an image with the watermark and then set the image as the background via css.
您可以使用水印制作图像，然后通过css将图像设置为背景。
For example:
例如：
<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>
That should work.
那应该工作。
回答by dawnerd
If you add "background-attachment: fixed" to the css in kavendek's suggestion above, you can "pin" the background image to the specified location in the window. That way, the watermark will always remain visible no matter where the user scrolls on the page.
如果在上面 kavendek 的建议中将“background-attachment:fixed”添加到 css，则可以将背景图像“固定”到窗口中的指定位置。这样，无论用户在页面上的何处滚动，水印都将始终可见。
Personally, I find fixed background images to be visually annoying, but I've heard site-owners say they love knowing that their logo or copyright notice (rendered as an image, presumably) is always right under the user's nose.
就我个人而言，我发现固定的背景图像在视觉上很烦人，但我听说网站所有者说他们喜欢知道他们的徽标或版权声明（大概呈现为图像）总是在用户的眼皮底下。
