如果你正在设计一个网站，你可能会有兴趣学习如何在网页上创建一个固定的背景图像或水印。这是一种常见的设计处理方法，在网上流行了相当长一段时间。这是一个方便的效果，在您的网页设计袋的技巧。

如果你以前没有这样做过，或者之前没有运气尝试过，这个过程可能看起来很吓人，但实际上一点也不难。通过这个简短的教程，您将在几分钟内获得使用CSS学习该技术所需的信息。

开始

背景图像或水印（实际上只是非常浅的背景图像）在印刷设计中有着悠久的历史。长期以来，文件上都有水印，以防止被复制。此外，许多传单和小册子使用大背景图像作为印刷品设计的一部分。网页设计长期以来都是从印刷品中借用样式，背景图像就是其中之一。

使用以下三个CSS样式属性可以轻松创建这些大型背景图像：

• 背景图像
• 背景重复
• 背景附件
• 背景尺寸

背景图像

您将使用背景图像定义将用作水印的图像。此样式仅使用文件路径加载站点上的图像，可能位于名为images的目录中。

重要的是，图像本身比普通图像更轻或更透明。这将创建“水印”外观，其中半透明图像位于网页的文本、图形和其他主要元素后面。如果不执行此步骤，背景图像将与页面上的信息竞争，使其难以阅读。

您可以在任何编辑程序（如Adobe Photoshop）中调整背景图像。

背景重复

接下来是backgroundrepeat属性。如果希望图像是大型水印样式的图形，可以使用此属性使该图像仅显示一次。

如果没有no repeat属性，默认情况下，图像将在页面上重复一次又一次。这在大多数现代网页设计中都是不可取的，所以这种样式应该被认为是CSS中必不可少的。

背景附件

背景附件是许多网页设计师都会忘记的特性。使用它可以在使用“固定”属性时将背景图像固定到位。它将图像转换为固定在页面上的水印。

此属性的默认值为scroll。如果未指定背景附件值，背景将与页面的其余部分一起滚动。

背景尺寸

背景大小是较新的CSS属性。它允许您根据正在其中查看的视口设置背景的大小。这对于在不同设备上以不同大小显示的响应性网站非常有用。

可用于此属性的两个有用值包括：

• 封面–缩放背景以显示全宽或全高。这意味着图像的某些部分可能不会出现在屏幕上，但会覆盖整个区域。
• Contain–缩放图像，使整个宽度和高度都显示在正在设置样式的区域中。图像没有被切断，但缺点是部分区域可能没有被图像覆盖。

将css添加到页面

了解上述属性及其值后，可以将这些样式添加到网站中。

如果您正在创建单页网站，请将以下内容添加到网页的页眉。如果您正在构建一个多页面站点，并且希望利用外部样式表的功能，请将其添加到外部样式表的CSS样式中。

更改背景图像的URL以匹配与站点相关的特定文件名和文件路径。进行任何其他适当的更改，以适应您的设计，以及您将有一个水印。

您也可以指定位置

如果要将水印放置在网页上的特定位置，也可以这样做。例如，您可能希望水印在页面的中间或者可能在下角，而不是上角，这是默认的。

为此，请将“背景位置”特性添加到样式中。这会将图像放置在您希望它出现的确切位置。可以使用像素值、百分比或对齐来实现该定位效果。