背景效果-css-v1.0.0

条纹背景

双条纹

  background:linear-gradient(#fb3 50%, #58a 50%);
  background-size: 100% 30px;

多条纹

background:linear-gradient(#fb3 33.3%, #58a 0, #58a 66.6%, yellowgreen 0);
background-size: 100% 45px;  

CSS标准规定：如果某个色标的位置值比整个列表中在它之前的色标的位置值都要小，则该色标的位置值会被设置为它前面所有色标位置值的最大值

垂直条纹
在开头加上一个额外的参数来指定渐变的方向，然后把background-size的值颠倒一下

  background:linear-gradient(to right,#fb3 50%, #58a 0);
  background-size: 30px 100% ;  

45度斜向条纹
方式1：单个贴片包含四个条纹，只有这样才能做到无缝拼接

 background:linear-gradient(45deg,#fb3 25%, #58a 0,#58a 50%,#fb3 0, #fb3 75%, #58a 0);
  background-size: 30px 30px;  

方式2：循环渐变

background:repeating-linear-gradient(45deg,#fb3, #fb3 15px, #58a 0,#58a 30px);

任意角度斜向条纹

background:repeating-linear-gradient(60deg,#fb3, #fb3 15px, #58a 0,#58a 30px);

同色系条纹
方式1：
为每种条纹单独指定颜色

background:repeating-linear-gradient(60deg,#79b, #79b 15px, #58a 0,#58a 30px);

方式2：
把最深的颜色指定为背景色，同时把半透明白色的条纹叠加在背景色之上来得到浅色条纹

  background: #58a;
  background-image:repeating-linear-gradient(30deg,hsla(0,0%,100%,.1), hsla(0,0%,100%,.1) 15px, transparent 0,transparent 30px);  

网格背景

波点背景

棋盘背景

参考文献

xiaohuochai