如何在没有图像的情况下创建文本水印？

Question

根据所请求页面的内容创建显示文本的水印需要什么css？

我正在使用Drupal生成页面内容。这里的目的是用相关内容以图形方式增强页面。因此，除了页面的标题和正文之外，我还希望在页面内容和背景图像下显示一些相关的关键词作为半透明背景。背景图像和水印文本将因不同类别的信息而异。

Answer 1

喜欢这个？ http://jsfiddle.net/fg7m3/

在这种情况下，绝对定位，z-index和不透明度是使其看起来像水印的关键元素。

Answer 2

这里有一个例子http://www.sohtanaka.com/web-design/protect-your-images-with-css-watermarks/，但是这对于知道如何在chrome中使用“inspect element”的人来说很无用，可以很容易地保存你的图像而不会出现水印..在这个例子中，你只用gif覆盖你的图像如果用户cliks“将图像另存为”，则保存。

所以我认为您需要更多像图像生成器一样，用水印覆盖您上传的图像。我可能是错的，如果有人知道这样做的CSS方式，请继续。