渐变背景 gradient（转）

渐变背景 gradient

在定义背景图片时，除了使用正常的图片之外，我们还可以通过 CSS3 的 gradient 去创造渐变背景图。同比使用图像的方案，使用 CSS3 gradient 来实现可以减少带宽和页面加载时间。如在移动端腾讯课堂的页面里，便使用到了 CSS3 gradient 来实现一个渐变的背景图。

简单来说渐变是指两种或多种颜色之间的平滑过渡，如雨后的彩虹就是一个渐变。目前浏览器可以支持两种类型的渐变：

线性渐变 (linear)，通过 linear-gradient 函数定义
径向渐变 (radial)，通过 radial-gradient 函数定义

在具体讲解之前，我们先来玩下一个在线渐变的编辑器——Ultimate CSS Gradient Generator （如果你对 PS 熟悉的那就非常眼熟了）。

我们可以点击预设的渐变背景，下面就会更新对应的颜色值、位置及透明度等，我们还可以添加颜色，改变其位置或透明度等。

线性渐变 (linear-gradient)

线性渐变，即沿着一个方向线性的进行着颜色之间的平滑过渡的一个渐变过程。

为了创建一个线性渐变，你必须至少定义两种颜色，同时你也可以设置一个方向或一个角度。其标准语法如下：

background: linear-gradient([direction | angle], color-stop, ..., color-stop);

direction：表示线性渐变的方向，例如 top 是从上到下、left 是从左到右。如果定义成left top，那就是从左上角到右下角。这个参数值可以省略，当省略不写的时候其取值为“to bottom”。
angle：表示线性渐变的角度，该角度是指水平线和渐变线之间的角度，以逆时针方向计算。换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。
color-stop：表示渐变的色标，每个色标包含一种颜色和一个位置，位置可以被指定为线长度的百分比或一个绝对长度。为实现期望的效果，可以指定任意多个色标。

下面我们以具体实例演示。

例子：从上到下的线性渐变

若不设置线性渐变的方向，则默认情况下会定义渐变的方向为从上到下。

下面是一个线性渐变的例子。渐变方向为从上到下，起始色标颜色为顶部橙色，过渡到底部的黄色。

#gradient {
  background: linear-gradient(orange, yellow); 
}

例子: 从左到右的线性渐变

下面是一个线性渐变的例子。渐变方向为从左到右，起始色标颜色为左侧的橙色，过渡到右侧的黄色。

#gradient {
  background: linear-gradient(to right, orange , yellow); 
}

例子：使用角度的线性渐变

下面的实例演示了如何在线性渐变上使用角度。


#gradient {
  background: linear-gradient(135deg, orange, yellow); 
}

例子：指定多个等间距的色标

下面的例子指定了四个色标，由于都没有指定位置，这些色标将自动地均匀隔开。

#gradient {
  background: linear-gradient(to right, red, orange, yellow, white);
}

例子：指定多个指定位置的色标

下面的例子指定了三个色标，其中第一个和最后一个色标并没有指定一个位置，则第一个位置值将自动分配为 0％，同理最后一个色标将自动分配为 100% ，中间的色标指定一个 70% 的位置, 则第一个色标到第二个色标渐变区域为 70% ，剩下的 30% 为第二个色标到最后一个色标的渐变区域。

#gradient {
  background: linear-gradient(to right, orange, yellow 70%, red); 
}

例子：使用透明度

为了添加透明度，我们可以使用 rgba() 颜色。下面的实例演示了从左边开始的线性渐变，起点是完全透明，慢慢过渡到完全不透明的蓝色。

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

例子: 重复平铺的线性渐变

linear-gradient 不支持自动重复的色标。然而我们可以通过使用 repeating-linear-gradient 来实现重复平铺的效果。

#gradient {
  background: repeating-linear-gradient(-45deg, blue, blue 5px, white 5px, white 10px);
}

上面所有线性渐变实例在线 demo：linear-gradient。

径向渐变 (radial-gradient)

不同于线性渐变，径向渐变是一种由指定渐变的中心按照设定的大小，向外成圆型或椭圆形扩散的渐变。其标准语法如下：

background: radial-gradient(position, shape size, color-stop, ..., color-stop);

position：指定渐变中心的位置，可用百分比指定径向渐变圆心的坐标值，或者用长度值指定径向渐变圆心的坐标值，也可以设置left, right, top, bottom, center等位置值
shape：定义渐变的形状，取值如下：
- circle 指定圆形的径向渐变
- ellipse 指定椭圆形的径向渐变，默认值
size：定义了渐变的大小，取值如下：
- closest-side：指定径向渐变的半径长度为从圆心到离圆心最近的边
- closest-corner：指定径向渐变的半径长度为从圆心到离圆心最近的角
- farthest-side：指定径向渐变的半径长度为从圆心到离圆心最远的边
- farthest-corner：指定径向渐变的半径长度为从圆心到离圆心最远的角
color-stop：跟线性渐变的色标一样。

注：默认情况下，渐变中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。

下面我们以具体实例演示。

例子: 等间距色标

默认来说，像线性渐变一样，色标之间是等间距的。

#gradient {
  background: radial-gradient(red, yellow, rgb(30, 144, 255));
}

例子: 指定间距色标

当然我们可以给色标指定特定的位置,使其不均匀分布展示。

#gradient {
  background: radial-gradient(red 5%, yellow 15%, rgb(30, 144, 255) 60%); 
}

例子: 指定渐变的形状（shape）

shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。

#gradient1 {
  background: radial-gradient(circle, red, orange, yellow); 
}
#gradient2 {
  background: radial-gradient(red, orange, yellow); 
}

例子: 指定渐变的尺寸（size）

size 参数定义了渐变的大小，可通过下面的例子查看size设置为不同值得效果。

#gradient1 {
  background: radial-gradient(circle closest-side, red, orange, yellow); 
}
#gradient2 {
  background: radial-gradient(circle farthest-side, red, orange, yellow); 
}
#gradient3 {
  background: radial-gradient(circle closest-corner, red, orange, yellow); 
}
#gradient4 {
  background: radial-gradient(circle farthest-corner, red, orange, yellow); 
}

例子：重复的径向渐变

radial-gradient不支持自动重复的色标。然而我们可以通过设置repeating-radial-gradient来实现重复的效果。

#gradient {
  background: repeating-radial-gradient(red, orange 10%, yellow 25%);
}

上面所有径向渐变实例在线 demo：radial-gradient。

浏览器兼容性

表中的数字指定了完全支持该属性的第一个浏览器版本。如后边跟有浏览器前缀（-webkit、-moz等）则表示需加上前缀才能支持该属性的第一个版本。

详细的兼容可点击查看: 浏览器兼容列表;

参考资料

posted @ 2017-06-19 21:01 Jm_jing 阅读(303) 评论(0) 收藏举报

刷新页面返回顶部

Jm_jing