Eighteen Blog

复杂的背景图案

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


# 一、网格 网格的原理其实很简单,目前我们已经实现了条纹背景,那么如果我们将条纹背景组合呢?互相穿插组合,那么是不是很简单就实现了各种各样的网格背景。 ## 1. 实色网格 代码如下:
1
2
3
4
5
6
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;
实际效果。 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200918100511610.png#pic_center) ## 2. 边框网格 实现类似边框网格的效果,我们只需要将实色的网格色块改变成一条边框就可以了。方法为在渐变中设置一条**1px**长度的颜色,然后剩下的颜色为**透明色**(或者其他底色)。 代码如下:
1
2
3
4
5
6
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;
实际效果。 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200918102106767.png#pic_center) 我们可以通过调整**background-size**来调整**网格**的大小。 **注意**:整个图片的大小为**201x201**,由于我们设置的其实是**左边和上边**,所以同一个单位背景内只有上边和左边,没有下边和右边。所以如果设置总长为200px时,右边和下边会看不到边框。所以我们**长宽各 + 1**,以下一个背景的左上作为我们的右下边框。 ## 3. 波点 除了实现类似格子一样的背景,我们还可以实现波点背景样式,这时我们就需要用到另外一个渐变:**径向渐变(radial-gradient)**,和线性渐变类似,效果是从背景中心点出发,向外渐变。 代码如下:
1
2
3
4
5

width:200px;
height:200px;
background-image: radial-gradient(green 3px, yellowgreen 0, yellowgreen 6px, transparent 0);
background-size: 20px 20px;
实际效果。 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200921085836761.png#pic_center) 我们可以通过调整**background-size**来调整**波点密度**。 **注意**:使用background-size调整波点背景的单个背景大小,调整的视觉效果是波点的密度大小,有时候会呈现出不一样效果和图案,比如当我们的波点连接起来的时候,我们的图案就变成了一个个菱形。 实际效果。 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200921090246511.png#pic_center) 以上效果只需要将background-size调整为12px,即背景尺寸 = 波点直径。

4. 棋盘

在这里插入图片描述

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

代码如下:

1
2
3
4
5
6

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

实际效果。
在这里插入图片描述

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

代码如下:

1
2
3
4
5
6

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

实际效果。
在这里插入图片描述

  1. 现在我们得到一半的三角形,那么拼一个正方形还需要一个相反方向的三角形,我们再来一个背景
    1
    2
    3
    background-image: 
    linear-gradient(45deg, #bbb 25%, transparent 0),
    linear-gradient(45deg, transparent 75%, #bbb 0);

在这里插入图片描述

  1. 到此我们得到了两个直角三角形,那么如何拼接成一个正方形呢?使用background-position调整直角三角形的位置即可。把右上角显示三角形的背景 向下 向左移动就阔以了
    1
    2
    3
    4
    5
    6
    7
    8
    9

    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;

实际效果。
在这里插入图片描述
那么搞定了一个再搞定另外一个就很简单了。

1
2
3
4
5
6
7
8
9
10
11
12

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;

实际效果。
在这里插入图片描述

小结

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

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

 评论