如何在HTML和CSS中以各种方式添加水印（附例子）

在这个简单的教程中，我们将学习如何通过HTML和CSS以不同方式添加水印。假设你想在网站的背景中显示你的标志作为水印，或者你想在网站的页眉或页脚显示一个特定的文字水印。你可以用下面的方法轻松做到这一点。你也可以用PHP添加文本水印。但在本教程中，我们将使用HTML和CSS。

在深入研究之前，让我们看看如何能非常容易地做到这一点。然后，我们将逐步介绍其他的方法。

在HTML页面上显示文本水印的基本方法。

为了在页面的右上方添加一个文本水印，我们需要添加一个div ，其类名为watermark 。因此，在你的<body> 中的任何地方添加<div class="watermark">Watermark text</div> 。
然后添加CSS.watermark{position: fixed; top: 0; right: 0;} 。我们还可以根据我们的需要改变位置和样式。

在上面的例子中，我们可以看到一小段文字，即 ***"水印文本"***正显示在我们网页的右上角。但问题是，用户可以选择该文本。因此，我们需要通过使用CSS 来禁止用户选择。你也可以从本教程中学习如何用CSS使某些文本不可选择？

如何通过CSS禁用水印文本的选择？

要禁用水印文本的选择，我们需要添加这个CSS：

.watermark{
  position: fixed;
  bottom: 0;
  right: 0;        
  user-select: none; /* Non-prefixed version for chorme, opera and*/
  -ms-user-select: none; /* Internet Explorer, Edge */
  -moz-user-select: none; /* Firefox */
  -khtml-user-select: none; /* Konqueror HTML */
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
}

上面的例子是基本的。因此，让我们对这个问题进行一下深入的探讨。

如何在一个HTML页面上添加背景水印图片？

为了添加一个背景水印图片，请按照以下步骤进行：

首先，将背景图像设置为<body> ，即。
background-image: url(watermark.png);
然后将背景图片的位置改为居中，使水印居中，并设置不重复。
background-position: center; background-repeat: no-repeat;
请看下面的图片

但主要问题是背景水印与文本颜色混合在一起。你可能会想，我们应该降低不透明度来克服这个问题。但是等等，根据w3schools，如果我们设置了父级不透明度，所有的子元素都会继承相同的透明度。顺便说一下，如果你有兴趣知道什么是继承或初始，你可能会发现这个教程很有帮助CSS初始和继承的区别。

好了，让我们回到本教程中来。为了克服这个问题，我们必须使用 "伪元素"。我们不设置<body> 元素的背景图片，而是设置它的::before 伪元素。让我们检查一下代码：

html{
  height: 100%;
}
body{
  position: relative;
  height: 100%;
}

body:before{
  content: ' ';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background:  url(watermark.png);
  background-position: center;  
  background-repeat: no-repeat;
  background-attachment: fixed;
  z-index: -1;
  opacity: 0.2;
}

在body:before 中，我们设置了opacity: 0.2; 。因此，它将只改变body:before 元素的不透明度，而不减少<body> 的其他子元素。这里我们还添加了background-attachment: fixed; ，以保持我们的背景图像固定。

如何在CSS中添加水印文本？

我们可以使用文本来代替背景水印。这也将有助于减少服务器的加载时间。所以我们来看看如何做：

body:before{
  content: 'CodeHasBug';
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
  
  color: #0d745e;
  font-size: 100px;
  font-weight: 500px;
  display: grid;
  justify-content: center;
  align-content: center;
  opacity: 0.2;
}

这里我们把位置改为fixed 。否则，当用户滚动时，它也会滚动。同时，设置display: grid; 在内容属性中，我们可以使用任何我们想显示的文本作为水印。此外，我们还可以通过以下方式改变水印的颜色 color: #0d745e;

如何在对角线上添加文本水印？

如果你理解了上面的例子，你可以很容易地将文本水印设置为对角线。我们只需要通过使用CSStransform 属性来旋转这个伪元素。所以，让我们看看这个例子：

body:before{
  content: 'CodeHasBug';
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
  
  color: #0d745e;
  font-size: 100px;
  font-weight: 500px;
  display: grid;
  justify-content: center;
  align-content: center;
  opacity: 0.2;
  transform: rotate(-45deg);
}

这里我们设置了transform: rotate(-45deg); ，你可以根据自己的需要进行设置。

如何在CSS HTML中添加斜向重复的文字水印？

这不能只用CSS和HTML来完成。我们需要添加jQuery或JavaScript来获得所需的结果。但我们要学习的是纯CSS水印。如果我们想用图片来做，那也是可以的。否则，我们必须使用脚本来实现。所以我们需要旋转的图片。请看下面的图片：

html{
  height: 100%;
}
body{
  position: relative;
  height: 100%;
 
}

body:before{
  content: '';
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
  background: url(watermark.png) 0 0 repeat;
  background-position: center;  
  opacity: 0.1;
}

这里我们使用了重复。所以它将重复相同的图像。

如何在用户打印网页时才显示水印？

在上图中，我们可以看到文本水印只在用户想把网页打印成PDF或直接从打印机打印时显示。这是非常有用的，只要有人想从你的网站上打印数据，水印也会被打印在该网页上。因此，让我们来看看如何做到这一点：

html{
  height: 100%;
}
body{
  position: relative;
  height: 100%;
}
@media print {
  body:before{
	content: 'CodeHasBug';
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: -1;

	color: #0d745e;
	font-size: 100px;
	font-weight: 500px;
	display: grid;
	justify-content: center;
	align-content: center;
	opacity: 0.2;
	transform: rotate(-45deg);
  }
}

在上面的例子中，我们正在使用print media-query。因此，上述CSS样式只在我们打印东西的时候起作用。