如果你正在设计一个网站,你可能会有兴趣学习如何在网页上创建一个固定的背景图像或水印。这是一种常见的设计处理方法,在网上流行了相当长一段时间。这是一个方便的效果,在您的网页设计袋的技巧。
如果你以前没有这样做过,或者之前没有运气尝试过,这个过程可能看起来很吓人,但实际上一点也不难。通过这个简短的教程,您将在几分钟内获得使用CSS学习该技术所需的信息。
背景图像或水印(实际上只是非常浅的背景图像)在印刷设计中有着悠久的历史。长期以来,文件上都有水印,以防止被复制。此外,许多传单和小册子使用大背景图像作为印刷品设计的一部分。网页设计长期以来都是从印刷品中借用样式,背景图像就是其中之一。
使用以下三个CSS样式属性可以轻松创建这些大型背景图像:
您将使用背景图像定义将用作水印的图像。此样式仅使用文件路径加载站点上的图像,可能位于名为images的目录中。
background-image: url(/images/page-background.jpg);重要的是,图像本身比普通图像更轻或更透明。这将创建“水印”外观,其中半透明图像位于网页的文本、图形和其他主要元素后面。如果不执行此步骤,背景图像将与页面上的信息竞争,使其难以阅读。
您可以在任何编辑程序(如Adobe Photoshop)中调整背景图像。
接下来是backgroundrepeat属性。如果希望图像是大型水印样式的图形,可以使用此属性使该图像仅显示一次。
background-repeat: no-repeat;如果没有no repeat属性,默认情况下,图像将在页面上重复一次又一次。这在大多数现代网页设计中都是不可取的,所以这种样式应该被认为是CSS中必不可少的。
背景附件是许多网页设计师都会忘记的特性。使用它可以在使用“固定”属性时将背景图像固定到位。它将图像转换为固定在页面上的水印。
此属性的默认值为scroll。如果未指定背景附件值,背景将与页面的其余部分一起滚动。
background-attachment: fixed;背景大小是较新的CSS属性。它允许您根据正在其中查看的视口设置背景的大小。这对于在不同设备上以不同大小显示的响应性网站非常有用。
background-size: cover;可用于此属性的两个有用值包括:
了解上述属性及其值后,可以将这些样式添加到网站中。
如果您正在创建单页网站,请将以下内容添加到网页的页眉。如果您正在构建一个多页面站点,并且希望利用外部样式表的功能,请将其添加到外部样式表的CSS样式中。
更改背景图像的URL以匹配与站点相关的特定文件名和文件路径。进行任何其他适当的更改,以适应您的设计,以及您将有一个水印。
如果要将水印放置在网页上的特定位置,也可以这样做。例如,您可能希望水印在页面的中间或者可能在下角,而不是上角,这是默认的。
为此,请将“背景位置”特性添加到样式中。这会将图像放置在您希望它出现的确切位置。可以使用像素值、百分比或对齐来实现该定位效果。
background-position: center;如果你想在Photoshop中创建一个微妙的水印,有一些非常复杂的方法,但是如果你需要一个快速的选择,你可以用7个简单的步骤在Photoshop中创建一个简单的水印。 ...
... 去露营地,注册你的Instagram账号,获得一个独一无二的网页,上面有你自己的网址。将此链接添加到Instagram个人资料页面。 ...
...个学生,一个小企业主,或者一个办公室职员…你将需要创建一个报告或者某种专业格式的文档。这本MakeUseOf指南将帮助你更新你的技术和锐化你的设计方法。 ...
... 如果您想捕获整个网页或聊天对话,请尝试使用以下七个应用之一捕获滚动屏幕截图。 ...
... 打开iMovie,创建一个新项目,然后导入要编辑的视频。 将视频拖到时间线上,以便可以对其进行编辑。 右键单击时间轴中的视频,然后选择“分离音频...
... 5storyscroll(windows、macos):将网页变成故事的滚动视频 ...
... 相关:如何在Microsoft Word文档中使用水印 使用google绘图创建水印图像 因为googledocs不允许您直接创建或添加水印,所以您需要创建一个。您可以创建一个包含水印的背景图像,然后将其放置在文本后面。 然后,您可以通过将水...