CSS背景(一)

CSS背景(一)

这次主要介绍的是CSS背景，包括建立在CSS渐变的基础上最简单的条纹背景和较复杂的背景图案，例如网格，波点和棋盘。每一种背景都非常好看，想要了解更多的同学看完这篇博客后可以去查阅相关的资料，自己设计出更精致的背景图。

首先要介绍的是最基础的知识：CSS渐变

CSS渐变包括两个部分：线性渐变和径向渐变

• 线性渐变(Linear Gradients)

  语法：

     background: linear-gradient(direction,coloc-stop1,color-stop2,...);
  
     direction的值默认为有由上而下
  
     例如：由上而下 红->蓝的渐变
  
          background: linear-gradient(red,blue);
  
        从左至右 红->蓝的渐变
  
          background: linear-gradient(to right,red,blue);
  
        对角渐变 左上角到右下角红->蓝的渐变
  
          background: linear-gradient(to bottom right,red,blue);
  
        带角度的渐变(0deg 将创建一个从下到的渐变，90个deg 将创建一个从左到右的渐变 以此类推）
  
          background: linear-gradient(angle,color-stop1,color-stop2);
  
        重复的线性渐变：repeating-linear-gradient(red,yellow 10%,blue 20%);

• 径向渐变(Radial Gradients)

  语法：

    background: radial-gradient(center,shape size,start-color,...,last-color);
  
    例如:颜色节点分布均匀的径向渐变
  
         background: radial-gradient(red,green,blue);
  
         颜色节点分布不均匀的径向渐变
  
         background: radial-gradient(red 5%,green 15%,blue 60%);
  
    shape参数定义了形状。它的值可以使circle或ellipse。其中circle表示圆形，ellipse表示椭圆形，默认值是ellipse.
  
         重复的径向渐变：repeating-radial-gradient(red,yellow 10%,blue 20%);

水平条纹

.emmm{
  position: relative;
  background: linear-gradient(yellow 50%,blue 50%);
  width: 100px;
  height: 100px;
  background-size: 100% 30px;
}

垂直条纹

.emmm{
  position: relative;
  background: linear-gradient(to right,yellow 50%,blue 50%);
  width: 100px;
  height: 100px;
  background-size: 30px 100%;
}

斜向条纹

.emmm{
  position:relative;
  background: repeating-linear-gradient(45deg,yellow,yellow 10px,blue 0,blue 20px);
  width: 100px;
  height:100px;
}

网格

.emmm{
  background: white;
  background-image: linear-gradient(90deg,rgba(200,0,0,0.5) 50%,transparent 0),
                    linear-gradient(rgba(200,0,0,0.5) 50%,transparent 0);
  width: 100px;
  height: 100px;
  background-size:30px 30px;
}



只改变格子大小，网格线保持固定
.emmm{
  background: rgb(200,0,0);
  background-image:linear-gradient(white1px,transparent 0),
                   linear-gradient(90deg,white 1px,transparent 0);
  width: 100px;
  height: 100px;
  background-size:10px 10px;

}

波点图和棋盘图请看CSS背景(二)