用CSS执行该技术
如果你正在设计一个网站，你可能有兴趣学习如何在网页上创建一个固定的背景图像或水印。 这是一种常见的设计处理，已经在相当长一段时间内在网上流行。 在你的网页设计中包含一些技巧是很方便的。
如果你以前没有做过或者以前没有尝试过，那么这个过程看起来可能很吓人，但实际上并不是非常困难。 通过这个简短的教程，您将在几分钟内使用CSS获得掌握该技术所需的信息。
入门
背景图像或水印（实际上只是非常浅的背景图像）在印刷设计中有历史。 长期以来，文件中都包含水印以防止它们被复制。 此外，许多传单和小册子都使用大型背景图片作为印刷品设计的一部分。 网页设计长期以来从印刷和背景中借用风格，这些借用风格就是其中的一种。
使用以下三种CSS样式属性可以轻松创建这些大型背景图片：
- 背景图
- 背景重复
- 背景附件
- 背景大小
背景图
您将使用背景图像来定义将用作水印的图像。 这种风格只是使用文件路径来加载您网站上的图片，可能位于名为“图片”的目录中。
background-image：url（/images/page-background.jpg）;
重要的是图像本身比正常图像更轻或更透明。 这将创建一个半透明图像位于网页的文本，图形和其他主要元素后面的“水印”外观。 如果没有这一步，背景图片将与您网页上的信息相互竞争，难以阅读。
您可以在任何编辑程序（如Adobe Photoshop）中调整背景图像。
背景重复
接下来是后台重复属性。 如果你希望你的图像是一个大的水印风格的图形，你可以使用这个属性来使该图像只显示一次。
背景重复：不重复;
如果没有“不重复”属性，默认情况是图像将在页面上一遍又一遍地重复。 这在大多数现代网页设计中是不可取的，所以这种风格在你的CSS中应该被认为是必不可少的。
背景附件
背景附件是很多网页设计师都忘记的属性。 使用它可以让您的背景图像在使用“固定”属性时保持固定。 这是将图像转换为固定在页面上的水印。
此属性的默认值是“滚动”。 如果您未指定背景附件值，背景将随页面的其余部分一起滚动。
background-attachment：fixed;
背景尺寸
Background-size是一个较新的CSS属性。 它允许您根据正在查看的视口设置背景的大小。这对于在不同设备上以不同尺寸显示的响应式网站非常有用。
background-size：cover;
您可以使用这个属性的两个有用的值包括：
- 封面 - 缩放背景，以显示全宽或全高。 这意味着图像的某些部分可能不会出现在屏幕上，但会覆盖整个区域。
- 包含 - 缩放图像，使整个宽度和高度均显示在正在设计的区域中。 图像没有被切断，但缺点是该区域的部分区域可能未被图像覆盖。
将CSS添加到您的页面
在了解了上述属性及其值之后，您可以将这些样式添加到您的网站中。
如果您制作单页网站，请将以下内容添加到网页的HEAD中。 如果要构建多页面网站并希望利用外部工作表的功能，请将其添加到外部样式表的CSS样式中。
<风格>
<！ -
身体 {
background-image：url（/images/page-background.jpg）;
背景重复：不重复;
background-attachment：fixed;
background-size：cover;
}
// - >
更改背景图像的URL以匹配与您的网站相关的特定文件名和文件路径。 进行其他适当的更改以适应您的设计，并且您将拥有水印。
你可以指定位置，也可以
如果你想在你的网页上的特定位置放置水印，你也可以这样做。 例如，您可能需要在页面中间或可能位于下角的水印，而不是默认的顶角。
为此，请将background-position属性添加到您的样式中。 这会将图像置于您希望显示的确切位置。 您可以使用像素值，百分比或对齐来实现该定位效果。
background-position：center;