如何为您的网站添加有趣的CSS背景

来源:设计前沿收集 作者:佚名 时间:2017-08-31

时间是一个网页背景是一个微小的平铺图像 - 通常是可怕的,殴打每个访客的眼球。今天,背景形成了许多在线平面设计的基础。

网络背景下的这场革命是由CSS的进步驱动的。Web标准现在得到更多的控制,因此您可以仔细定义背景的位置,使用渐变,并将多个背景添加到单个元素。

覆盖这一领域的一切都将需要一本书,因此我们已经选择了一些重要的起点,让您有所进展,并为您提供了奇怪的选择链接,进一步探索。请享用!

将CSS背景添加到网页元素

CSS背景需要背景简写属性,或使用更具体的属性,如(但不限于):background-color ; 背景图像 ; 背景位置 ; 背景大小 ; 背景重复 ; 和背景附件。这些可以为网页的背景(通过正文选择器)或页面元素(如标题,divs等)定义。

在最基本的层面上,您可以使用背景将页面转成红色:

body {
 background: red;
 }


进一步更高级,您可以添加一个水平居中的图像,从容器顶部20px,不重复,并在网页滚动时固定:

body {
 background: url(image.png) center 20px no-repeat fixed;
 }

作为背景的图像(注意:避免在您自己的设计中这种低水平的对比度)

如果你想在没有使用背景速记的情况下写出来,它将如下所示:

body {
 background-image: url(image.png);
 background-position: center 20px;
 background-repeat: no-repeat;
 background-attachment: fixed;
 }


如果要为元素添加多个背景,可以在CSS声明中使用逗号分隔值集。请注意,首先指定哪个项目位于堆栈的顶部,这意味着它将显示在其他背景上方。

body {
 background: url(image.png) center 20px no-repeat fixed, url(image-2.png) center center no-repeat fixed;
 }


在这种情况下,一个图像按前一个例子显示,直接在内容区域的中心显示一个图像。

调整背景图片大小

到目前为止,我们已经避免了背景大小。但是,这很重要,因为它可以控制背景图像的大小。具体来说,您可以以像素或百分比项定义图像的水平和垂直尺寸,例如:

background-size: 200px 50px;


还有两个关键字值,可以替代使用:包含覆盖。这些大致相似,提供了在元素的内容区域内缩放图像的方式。不同之处在于,内容旨在使图像尽可能大,同时仍然在内容区域中显示所有图像(意味着您通常会在其中获得空白),而覆盖完全覆盖内容区域,但可能会导致某些图像不可见。后者通常用于使用照片作为背景的网站。

CSS'包含'(顶部)对'覆盖'(底部)值

请注意,您可以将背景尺寸添加到背景速记定义 - 将其放置在背景位置值之后,其中使用正斜杠将两者分开:

background: url(image.png) center 20px/contain no-repeat fixed


使用高分辨率Retina背景图像

添加高分辨率Retina背景时,背景大小也可用于强制此类图像以正确的大小显示。

举个例子,想像一个标识iddiv。这适当地使用了CSS作为背景的标志。它是150像素的平方,所以你使用的基本的CSS是:

#logo {
 width: 150px;
 height: 150px;
 background: url(logo.png) no-repeat;
 }


高分辨率使事情变得复杂。我们不想强制旧的硬件加载较大的图像,因此必须使用媒体查询才能在支持的硬件上加载更高分辨率的标志。

@media (-webkit-min-device-pixel-ratio: 2),
 (min-resolution: 192dpi) {
  #logo {
   background-image: url(logo@2x.png);
  }
 }


现在的问题是@ 2x高分辨率图像是300像素平方(因为它是原始分辨率的两倍),而是用作150像素方形容器的背景。所以在这一点上,你只看到它的四分之一。

调整大小修复之前的高分辨率图像

这通过为#logo分配一个特定的背景大小值来修复

#logo {
 width: 150px;
 height: 150px;
 background: url(logo.png) no-repeat;
 background-size: 150px 150px;
 }

高分辨率标志,现在紧贴在其容器内

使用多种背景分辨率并获得相同结果的更现代化的方法是CSS4的图像集

#logo {
 background-image: image-set(
  url(logo.png) 1x,
  url(logo@2x.png) 2x
  );
 }


图像集的优点是CSS更简单,用户代理确定应该使用的图像。缺点是浏览器支持 - 在撰写本文时仍然不完整。访问此测试页面,以快速检查您支持票价的浏览器。(这也许是为什么许多设计师使用脚本自动化服务高分辨率图像。)

使用alpha通道和渐变

我们在这个快速(在网站教程术语)文章的最后一个提示文章涉及alpha通道和渐变。当互联网是蒸汽动力的时候,你经常有设计师使用“棋盘”GIF来模拟Alpha通道(每个其他像素都是透明的)。现在,您只需分配RGBA中的颜色:

main { background: rgba(255,255,255,0.7); }


在上面的例子中,背景将是70%的白色,允许其下面的任何东西显示出来。使用高于复杂图像的半透明背景时,您需要小心保持清晰度,但它们可以很好地为网页添加视觉兴趣。

Alpha通道,渐变和一些可疑的颜色选择

同样,如果网页设计师想要渐变作为背景,那么网页设计师就会使用它来输出和平铺GIF,但是除非您希望像1999年一样,否则您将不再需要这些梯形图。现在,您将需要CSS3 线性梯度径向 -渐变属性,您可以为其定义方向和颜色停止。

这是一个基本渐变的CSS规则:

h1 { background: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0)); }


这将应用于一级标题,给出一个从左到右的线性渐变,从纯白色开始,以透明白色结束。

使用角度和多色停止,您可以走得更远,梯度更远。要进行实验,请尝试使用类似Photoshop的CSS渐变生成器并检查代码输出(注意链接示例为旧版浏览器添加语法 - 只需获取线性梯度线即可自行使用)。

正如CSS Patterns Gallery所展示的,您可以使用CSS渐变来做一些非常漂亮的事情

如果您想了解哪些经验丰富的网络专业人士可以使用渐变和背景大小,请查看Lea Verou的CSS3图库。在那里,您会发现使用CSS渐变创建各种严重令人印象深刻的背景图案的现场示例。

而且,是的,有一些我们来到这里的一些提示,就是在其中一些人眼球上的攻击。但与网页背景的一切一样,关键在于确保您添加的内容与设计背景相关,最重要的是,背景不会分散内容的注意力,或使其难以辨认。