你的位置:首页 > 网页设计

[网页设计]如何通过CSS3实现背景图片色彩的梯度渐变


随着网站的越来越普及,CSS3和HTML5必将成为网站前端发展的主流方向,特别是在移动端,高端浏览器给前端工程师们带来了无以言表的体验。

通俗的来讲,CSS3可以说是CSS技术的升级版本,CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂,所以,把它分解为一些小的模块,更多新的模块也被加入进来。这些模块包括:盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。那么,今天我首先要在马海祥博客上跟大家分享的就是CSS3的Gradients(梯度渐变)。

如何通过CSS3实现背景图片色彩的梯度渐变-马海祥博客

首先我们先来看下新的梯度渐变语法,新的语法包含四个渐变函数:

linear-gradient()
  radial-gradient()
  repeating-linear-gradient()
  repeating-radial-gradient()

这些函数名无需过多的解释,我之后会在马海祥博客上谈到更多关于循环渐变网页设计。

因为规范仍是初稿阶段,所以我们在这些渐变函数前加以-webkit-前缀。当以后规范不再是初稿阶段,我们将能够不加前缀而使用他们。

1、Linear Gradients(线性梯度渐变)

为元素盒模型填充线性渐变是最常用的。你只需要考虑渐变从哪个方向开始。据马海祥了解有两种方式可以去指定它。

第一种,你可以指定渐变从哪个方向或角落开始:

 

linear-gradient(left, white, black)

 

linear-gradient(top right, white, black)

你甚至可以省略第一个参数,他将默认为top并给出一个垂直渐变。

第二种,你可以指定渐变的角度:

 

linear-gradient(135deg, white, black)

角度按逆时针方向旋转,0度时为从左向右方向。

注意在所有这些情况下,渐变足够大以填满元素盒模型。

2、Radial Gradients(径向梯度渐变)

径向渐变更加复杂,在填充时有更多的选项。

马海祥觉得最简单的形式是以元素盒模型中心为渐变起始,向外填充至每个角落:

 

radial-gradient(white, black)

这相当于 radial-gradient(center, ellipse cover, white, black)。

第一个参数为可选,默认为 center ,也可以是一个点(就像 background-position ),他允许你将原点放置到其它地方:

 

radial-gradient(10% 30%, white, black)

原点位置后面的参数用来指定渐变的形状和大小,这是两种方式之一。

这种方式用一些关键词来描述形状(circle,ellipse)和大小(closest-side,closest-corner,farthest-side,farthest-corner,contain,cover)例如:

 

radial-gradient(30% 30%, closest-corner, white, black)

 

radial-gradient(30% 30%, circle closest-corner, white, black)

如果你愿意,你还可以分别指定径向渐变的水平与垂直结束半径:

 

radial-gradient(center, 5em 40px, white, black)

3、Repeating Gradients(重复梯度渐变)

循环渐变 repeating-linear-gradient()和repeating-radial-gradient()

拥有完全相同的简写语法,且整个渐变将被循环填充:

 

repeating-linear-gradient(left, red 10%, blue 30%)

这些停靠点将被循环用于调整他们首尾相连,这常常会导致颜色之间过渡强烈。

你可以避免循环末尾的颜色:

 

repeating-radial-gradient(top left, circle, red, blue 10%, red 20%)

4、Color Stops(色站)

为渐变指定颜色停靠点很容易;最简单的情况下,你只需要提供一个颜色列表:

 

linear-gradient(left, red, green, blue)

这样会使所有的颜色平均分布于渐变之上。web前端

如果你愿意,你还可以为个别颜色定位具体的停靠点,然后让浏览器分配其它剩余的:

 

linear-gradient(bottom left, red 20px, yellow, green, blue 90%)

那些渐变轴线可能是条对角线;那么百分比则相应对角线的长度。

颜色的停靠点相同会使颜色之间过渡强烈:

 

linear-gradient(top left, red, yellow, green 60%, purple 60%, blue)