在网页上创建背景水印的提示

如果你是设计一个网站，您可能有兴趣了解如何在网页上创建固定的背景图像或水印。这是一个常见的设计治疗，这在线很受欢迎。在您的网络设计袋的技巧中有一种方便的效果。

如果您之前没有这样做过或以前尝试过运气，则此过程似乎可能令人恐慌，但实际上并不是很难。使用此简短教程，您将获得您需要在几分钟内使用CSS的信息所需的信息。

入门

背景图像或水印（真正只是非常轻的背景图像）在印刷设计中具有历史。文档长期以来包含在它们上的水印，以防止它们被复制。此外，许多传单和小册子使用大背景图像作为印刷件的设计的一部分。Web Design从打印和背景图像中借来的风格，是这些借来的样式之一。

使用以下三个易于创建这些大背景图像CSS风格特性：

• 背景图片
• 背景重复
• 背景附件
• 背景大小

背景图片

您将使用背景图像定义将用作水印的图像。此样式只需使用文件路径来加载您在网站上的图像，可能在命名的目录中图片。

背景 - 图片：URL（/images/page-background.jpg）;

重要的是，图像本身比正常图像更轻或更透明。这将创造“水印“查看哪个半透明图像位于文本，图形和网页的其他主要元素后面。如果没有此步骤，背景图像将与页面上的信息竞争，并使难以读取。

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

背景重复

接下来的背景 - 重复属性。如果您希望图像是一个大型水印样式图形，您将使用此属性仅显示该图像仅显示一次。

背景 - 重复：无重复;

没有没有重复属性，默认值是图像将在页面上遍历一遍又一遍地重复。这在大多数现代网页设计中是不可取的，因此这种风格应该被视为您的CSS必不可少的。

背景附件

背景 - 附件是许多网络设计师忘记的财产。使用它会在使用时保持背景图像固定到位固定的财产。它是将该图像转化为固定在页面上的水印。

此属性的默认值是滚动。如果未指定背景附件值，则背景将滚动到页面的其余部分。

背景 - 附件：固定;

背景大小

背景大小是一个较新的CSS属性。它允许您根据正在查看的视口中设置背景的大小。这非常有帮助响应网站将以不同的尺寸显示在不同的设备上。

背景尺寸：封面;

您可以为此属性使用的两个有用的值包括：

• 覆盖- 缩放背景，以便显示全宽或全高。这意味着图像的某些部分可能不会出现在屏幕上，但整个区域将被覆盖。
• 包含- 缩放图像，因此整个宽度和高度都显示在样式的区域中。图像不会被切断，但下行的是图像的部分可能不被图像覆盖。

将CSS添加到您的页面上

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

如果您正在进行单页网站，请将以下内容添加到网页的头部。如果您正在构建多页网站并希望利用外部表的电源，请将其添加到外部样式表的CSS样式。

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

您也可以指定位置

如果要将水印放在网页上的特定位置，您也可以执行此操作。例如，您可能希望页面中间的水印或者在下角中可能与顶角相反，这是默认值。

为此，请将背景位置属性添加到您的风格。这将将图像放在您希望它出现的确切位置。您可以使用像素值，百分比或对齐来实现定位效果。

背景位置：中心;