如何把 css 渐变背景玩出花样来

前言

不得不说，随着蓝湖，摹客等 UI 设计共享平台的发展，前端一些 css 的样式手写的时候也变得生疏起来。相对于选中某个设计图的元素，直接就能复制 css 代码来说，前端开发自己手写 css 变得低效。并且前段时间有的设计平台甚至推出了设计图转整张 html 代码，还可以自定义基于 vue 或者 react 框架等主流框架，虽然实践操作并没有介绍的那么神奇好用，但是相信不久的未来，写静态页面这种事情都会由平台自动生成了~

未来是美好的，不过目前来说，一些基础的 css 样式还是需要前端开发者熟练掌握的。无论是更改代码还是和同事探讨问题，扎实的基本功总是开发者必备的。所以今天大冰块就整理复习一下 css 中渐变背景的属性，博客主要从 条纹背景 和 复杂花色背景 两方面来详细介绍。

基础知识

首先我们需要复习一下 background: linear-gradient() 的基础知识, background: linear-gradient() 用于创建多种颜色线性渐变的背景图案。

background: linear-gradient(direction（可省略，默认是to bottom，即向下）, color stop（渐变的颜色 颜色开始位置 颜色结束位置）, color stop（渐变的颜色 颜色开始位置 颜色结束位置）, ...) 

background: linear-gradient(#f55 0% 50%, #55f 50% 80%, #5f5 80% 100%);

从 0% —— 50%的区间是颜色 #f55 纯色；

从 50% —— 50% 的区间是颜色 #f55 到颜色 #55f 的线性渐变（看起来直接变化，没有渐变）；

从 50% —— 80% 的区间是颜色 #55f 纯色；

从 80% —— 80% 的区间是颜色 #55f 到颜色 #5f5 的线性渐变（看起来直接变化，没有渐变）；

从 80% —— 100% 的区间是颜色 #5f5 纯色。

其中第一个颜色的开头的 0%和最后一个颜色末尾的 100%可以省略，即：background: linear-gradient(#f55 50%, #55f 50% 80%, #5f5 80%);

那么上面这行代码中重复的 50% 和 80% 能不能简化呢？答案是可以的：

如果某颜色的起始位置比在它之前的颜色结束位置还要小，那么这个颜色的实际起始位置为在它之前的颜色的结束位置。

这就意味着上述这行代码可以改为：

background: linear-gradient(#f55 50%, #55f 0 80%, #5f5 0);

了解了 linear-gradient 的使用，来具体看一下实际操作吧！

默认的渐变范围（0% —— 100%）

例如：

width: 500px;height: 500px;background: linear-gradient(#f55, #55f);

则0% —— 100% 的范围是 #f55 至 #55f 的渐变；

如下图所示：

手动设置渐变范围

我们把上面的 background: linear-gradient(#ff0, #f0f); 改为 background: linear-gradient(#f55 50%, #55f 90%); ，则:

0% —— 50% 的范围是 #ff0 纯色；

50% —— 90% 的范围是#f55 至 #55f 的渐变；

90% —— 100% 的范围是 #f0f 纯色。

如下图所示：

渐变范围为 0

那么，如果我们把渐变范围改为 0 会怎么样呢？比如渐变范围是 50% —— 50% 的时候。

我们把上面的 background: linear-gradient(#ff0, #f0f); 改为 background: linear-gradient(#f55 50%, #55f 0); ，则:

0% —— 50% 的范围是 #ff0 纯色；

50% —— 50% 的范围是#f55 至 #55f 的渐变（相当于无渐变范围）；

50% —— 100% 的范围是 #f0f 纯色。

如下图所示：

渐变方向

默认的渐变方向是从上到下，即 to bottom 由上到下，direction 取值可为：

to top： 由下到上；

to right： 由左到右；

to bottom： 由上到下；

to left： 由右到左；

to right bottom： 由左上角到右下角；

to left bottom： 由右上角到左下角；

to left top： 由右下角到左上角；

to right top： 由左下角到右上角；

如下图所示：

更改渐变生成背景图案的大小

本质上线性渐变是代码生成的背景图案，所以它同样适用于背景图案的属性，我们给当前示例设置 background-size: 100% 50px; background-repeat: no-repeat;，可以更改背景图案高度为 50px，no-repeat 保证背景图案只显示一次，不平铺。

如下图所示：

好了，掌握了 linear-gradient 基本的使用方法，下面我们就可以开始愉快地制作我们的水平条纹和垂直条纹了~

水平条纹和垂直条纹

看完上面的示例，我觉得完成想要水平条纹和垂直条纹的话，简直是轻轻松松不在话下。

水平条纹：

.box{    width: 200px;    height: 200px;    background: linear-gradient(#f55 50%, #55f 0);    background-size: 50px 100%;}

如下图所示：

垂直条纹：

旋转角度为 90deg 、渐变方向为 to left 、或者渐变方向为 to right 均可。

.box{    width: 200px;    height: 200px;    background: linear-gradient(90deg, #f55 50%, #55f 0);    background-size: 50px 100%;}

如下图所示：

斜条纹

斜条纹是怎么做的呢，如果我想要一个倾斜角度为 45 度的背景图案，直接把旋转角度改为 45deg 可以吗？我们一起来试一下：

.box{    width: 200px;    height: 200px;    background: linear-gradient(45deg, #f55 50%, #55f 0);    background-size: 50px 100%;}

如下图所示：

惊不惊喜？意不意外？？为什么变成了这个样子呢？？？

我们把 background-repeat: no-repeat; 加上，就能看明白了，图案背景不平铺的情况下，是这个样子：

我们要的斜条纹图案背景，实际上是每一小块背景图案平铺之后产生的，所以我们把背景图案宽高都设为 50px，代码改成这样看一下：

.box{    width: 200px;    height: 200px;    background: linear-gradient(45deg, #f55 50%, #55f 0);    background-size: 50px 50px;}

如下图所示：

还是不对，我们发现，每一小块背景图案平铺之后没有和旁边的背景图案颜色对齐，每一小块的背景图案分割后的颜色首尾应该对应起来，那么我们改成如下代码：

.box{    width: 200px;    height: 200px;    background: linear-gradient(45deg, #f55 25%, #55f 0 50%, #f55 0 75%, #55f 0);    background-size: 50px 50px;}

如下图所示：

看起来似乎没什么问题，但是如果我们想要把倾斜角度改为 60 度呢？

.box{    width: 200px;    height: 200px;    background: linear-gradient(60deg, #f55 25%, #55f 0 50%, #f55 0 75%, #55f 0);    background-size: 50px 50px;}

如下图所示：

又有问题了，这说明通过改变背景图案的旋转角度是不行的，而实际上，如果我们想通过 background: linear-gradient() 来设置斜条纹的背景图案是很不方便的，如果你需要让背景图案旋转特定的角度，就需要进行一定的计算，想要实现不同的角度的斜条纹，可以使用重复的线性渐变: repeating-linear-gradient() 来解决这个问题：

.box{    width: 200px;    height: 200px;    background: repeating-linear-gradient(60deg, #f55 5%, #55f 0 15%, #f55 0 25%);}

如下图所示：

如果要指定背景图案的宽度，直接把 % 改为 px 即可，不同的效果可以参考 demo 多尝试~

复杂的花色背景

看到这里是不是觉得只做条纹背景太简单了，想要挑战一下高阶玩法？来和大冰块一起做一些复杂的背景图案吧~

网格背景图案

单个的渐变效果看起来可能并不是那么神奇，不过复杂的效果总是由简单的效果积累而成的，如果我们给同一个盒子背景同时设置多个渐变背景图案，神奇的效果就出来了~

等宽方格背景图案

.box{    width: 200px;    height: 200px;    background-color: #fff;    background-image: linear-gradient(rgba(85, 85, 255, 0.5) 50%, transparent 0), linear-gradient(to right,rgba(85, 85, 255, 0.5) 50%, transparent 0);    background-size: 45px 45px;}

如下图所示：

网格线分割背景图案

同样的道理，我们也可以做一个网格线分割的背景图案，网格线设置为 1px 。

.box{    width: 200px;    height: 200px;    background: #55f;    background-image: linear-gradient(#fff 1px, transparent 0), linear-gradient(to right, #fff 1px, transparent 0);    background-size: 40px 40px;}

如下图所示：

精细的网格线分割背景图案

单纯的网格分割背景谈不上神奇，如果我们把两个网格线叠加起来，会产生什么样的效果呢？

.box{    width: 400px;    height: 400px;    background: #55f;    background-image: linear-gradient(#fff 2px, transparent 0), linear-gradient(to right, #fff 2px, transparent 0), linear-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 0), linear-gradient(to right, rgba(255, 255, 255, 0.3) 1px, transparent 0);    background-size: 60px 60px, 60px 60px, 20px 20px, 20px 20px;}

如下图所示：

代表透明背景色的棋盘图案

我们也可以再想一下，如何做一个代表透明背景色的棋盘图案？思路就是用两层背景重叠起来，两层背景图案都是 直角等腰三角形 ，第一层背景生效的基准点为左上角，第二层背景生效的基准点为自身的 1/2 。这样一来，两层背景图案 重叠展示的图案即为正方形 ，配合底色的 #eee ，即可生成代表透明背景色的棋盘图案。

.box{    width: 200px;    height: 200px;    background: #eee;    background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.25) 25%, transparent 0, transparent 75%, rgba(0, 0, 0, 0.25) 0), linear-gradient(45deg, rgba(0, 0, 0, 0.25) 25%, transparent 0, transparent 75%, rgba(0, 0, 0, 0.25) 0);    background-position: 0 0, 20px 20px;    background-size: 40px 40px;}

如下图所示：

如果我们再改一下背景图案的倾斜角度，使多个背景重叠，再加一些其他的属性，如把混合模式改为正片叠底（有摄影修图经验的可能会熟悉这个） background-blend-mode: multiply; ，可能也会有意想不到的收获哦。

.box{    width: 400px;    height: 400px;    background: repeating-linear-gradient(-45deg, transparent, transparent 25%, #f55 0, #f55 50% ), repeating-linear-gradient(45deg, transparent, transparent 25%, #55f 0, #55f 50% ), #efb;    background-size: 200px 200px;    background-blend-mode: multiply;}

如下图所示：

后记

css 的属性其实还是蛮多的，很多样式被我们忽视的样式也很有意思。像渐变属性其实可以玩出很多花样来，有的时候并不一定要让 UI 切图，css 也能解决很多问题。文章写了好久才写了这些，看起来虽然很浅显，但实际上我在写文章写 demo 的过程中学到的远远不止这些。

不得不说，输出其实比学习还要难，一起和大冰块加油吧！