文章目录

前言
一、网格
- 1. 实色网格
- 2. 边框网格
- 3. 波点
- 4. 棋盘
小结
相关阅读

前言

上一篇文章中我们学会了如何使用渐变实现条纹状的背景，但是实际上条纹背景并不是我们能实现的唯一的背景图案，利用渐变我们可以实现很多更为复杂的图案，本篇会介绍一些其他的简单而实用的背景图案。

一、网格

网格的原理其实很简单，目前我们已经实现了条纹背景，那么如果我们将条纹背景组合呢？互相穿插组合，那么是不是很简单就实现了各种各样的网格背景。

1. 实色网格

代码如下：

 width: 200px;height: 200px;background-image:linear-gradient(rgba(255,187,51, .5) 33%, rgba(85,136,170, .5) 0, rgba(85,136,170, .5) 66%, rgba(173,255,47, .5) 0),linear-gradient(90deg, rgba(255,187,51,1) 33%, rgba(85,136,170, 1) 0, rgba(85,136,170, 1) 66%, rgba(173,255,47, .5) 0);background-size: 60px 60px;

实际效果。

2. 边框网格

实现类似边框网格的效果，我们只需要将实色的网格色块改变成一条边框就可以了。方法为在渐变中设置一条1px长度的颜色，然后剩下的颜色为透明色（或者其他底色）。

代码如下：

 width: 201px;height: 201px;background-image:linear-gradient(rgba(255,187,51, .5) 1px, transparent 0),linear-gradient(90deg,rgba(255,187,51, .5) 1px, transparent 0);background-size: 20px 20px;

实际效果。

我们可以通过调整background-size来调整网格的大小。

注意：整个图片的大小为201x201，由于我们设置的其实是左边和上边，所以同一个单位背景内只有上边和左边，没有下边和右边。所以如果设置总长为200px时，右边和下边会看不到边框。所以我们长宽各 + 1，以下一个背景的左上作为我们的右下边框。

3. 波点

除了实现类似格子一样的背景，我们还可以实现波点背景样式，这时我们就需要用到另外一个渐变：径向渐变（radial-gradient），和线性渐变类似，效果是从背景中心点出发，向外渐变。

代码如下：

width:200px;height:200px;background-image: radial-gradient(green 3px, yellowgreen 0, yellowgreen 6px, transparent 0);background-size: 20px 20px;

实际效果。

我们可以通过调整background-size来调整波点密度。

注意：使用background-size调整波点背景的单个背景大小，调整的视觉效果是波点的密度大小，有时候会呈现出不一样效果和图案，比如当我们的波点连接起来的时候，我们的图案就变成了一个个菱形。

实际效果。

以上效果只需要将background-size调整为12px，即背景尺寸 = 波点直径。

4. 棋盘

棋牌有点类似于我们在第一步做到的实色网格，不同的是棋盘是由一个实色和一个透明所组成的图案。所以，看似和实色网格类似，但是实现起来无法使用跟实色网格相同的实现方法（不信邪的话可以使尝试一下），那么我们如何实现棋牌类型的图案呢？也不难，我们使用直角三角形进行拼接。还得我们在实现斜向条纹时做的尝试吗？CSS揭秘：5.条纹背景（上）

代码如下：

width:200px;height:200px;background: #eee;background-image: linear-gradient(45deg, #bbb 50%, transparent 0); background-size: 30px 30px;

实际效果。

从刚开始的展示图案可以看出来，我们的正方形色块只是对角线的一半，那么我们的一个三角形就是1/4了，所以我们改造一下

代码如下：

width:200px;height:200px;background: #eee;background-image: linear-gradient(45deg, #bbb 25%, transparent 0);background-size: 40px 40px;

实际效果。

现在我们得到一半的三角形，那么拼一个正方形还需要一个相反方向的三角形，我们再来一个背景

 background-image: linear-gradient(45deg, #bbb 25%, transparent 0),linear-gradient(45deg, transparent 75%, #bbb 0);

到此我们得到了两个直角三角形，那么如何拼接成一个正方形呢？使用background-position调整直角三角形的位置即可。把右上角显示三角形的背景向下向左移动就阔以了

width:200px;height:200px;background: #eee;background-image: linear-gradient(45deg, #bbb 25%, transparent 0),linear-gradient(45deg, transparent 75%, #bbb 0);background-position: 0px 0px, -20px 20px;background-size: 40px 40px;

实际效果。

那么搞定了一个再搞定另外一个就很简单了。

width:200px;height:200px;background: #eee;background: #eee;background-image:    linear-gradient(45deg, #bbb 25%, transparent 0),    linear-gradient(45deg, transparent 75%, #bbb 0),    linear-gradient(45deg, #bbb 25%, transparent 0),    linear-gradient(45deg, transparent 75%, #bbb 0);background-position: 0 0, -20px 20px,                     20px -20px, 0 0;background-size: 40px 40px;

实际效果。

小结

本篇主要对一些更为复杂的背景图案做出了一些介绍，分别有实色网格图案，边框网格图案，波点图案，棋盘图案，其中：

实色网格用到了透明叠加的方法，实现了苏格兰裙一样的背景图案。
边框网格实际上是利用1px的渐变边框，实现其实类似纯div的左上border的方法。
波点使用到了radial-gradient径向渐变，使用方法和线性渐变相似。
棋盘图案则借助了background-position对直角三角形进行定位，以组合出正方形图案。

CSS揭秘：6.复杂的背景图案（上）

文章目录

前言

一、网格

1. 实色网格

2. 边框网格

3. 波点

4. 棋盘

小结

相关阅读

CSS揭秘：6.复杂的背景图案（上）相关推荐

最新文章

热门文章