CSS背景效果

前面的话

　　本文将详细介绍CSS背景效果

 

条纹背景

【双条纹背景】

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

　　CSS标准规定：若是某个色标的位置值比整个列表中在它以前的色标的位置值都要小，则该色标的位置值会被设置为它前面全部色标位置值的最大值

　　所以，第二个色标值能够设置为0

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

【多条纹背景】 

　　若是要建立超过两种颜色的条纹，也是很容易的

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

【垂直条纹】

　　垂直条纹的代码跟水平条纹几乎是同样的，差异主要在于须要在开头加上一个额外的参数来指定渐变的方向，而后把background-size的值颠倒一下 

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

【45度斜向条纹】

　　思路以下：单个贴片包含四个条纹，只有这样才能作到无缝拼接

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

　　使用循环渐变动加简单

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

【任意角度斜向条纹】

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

【同色系条纹】

　　在大多数状况下，咱们想要的条纹图案并非由差别极大的几种颜色组成的，这些颜色每每属于同一色系，只是在明度方面有着轻微的差别 

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

　　可是，这两种颜色之间的关系在代码中并无体现出来。此外，若是想要改变这个条纹的主色调，甚至须要修改四处

　　一种更好的方法是再也不为每种条纹单独指定颜色，而是把最深的颜色指定为背景色，同时把半透明白色的条纹叠加在背景色之上来获得浅色条纹

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

　　如今只须要修改一个地方就能够改变全部颜色了。还获得了一个额外的好处，对于那些不支持css渐变的浏览器来讲，这里的背景色还起到了回退的做用

 

网格背景

【桌布效果】

　　把多个渐变图案组合起来，让它们透过彼此的透明区域显现时，就会造成各类网格。例如，把水平和垂直的条纹叠加起来，获得桌布图案

  background: white;
  background-image:linear-gradient(90deg,rgba(200,0,0,.5) 50%, transparent 0),linear-gradient(rgba(200,0,0,.5) 50%, transparent 0);
  background-size: 30px 30px;

【图纸辅助线】

　　某些状况下，但愿网格中每一个格子的大小能够调整，而网格线条的粗细同时保持固定。例如，相似图纸辅助线的网格

  background: #58a;
  background-image:linear-gradient(90deg,white 1px, transparent 0),linear-gradient(white 1px, transparent 0);
  background-size: 30px 30px;

【蓝图网格】

　　甚至能够把两幅不一样线宽、不一样颜色的网格图案叠加起来，获得一个更加逼真的蓝图网格

  background: #58a;
  background-image:linear-gradient(90deg,white 2px, transparent 0),linear-gradient(white 2px, transparent 0),linear-gradient(90deg,hsla(0,0%,100%,0.3) 1px, transparent 0),linear-gradient(hsla(0,0%,100%,0.3) 1px, transparent 0);
  background-size: 75px 75px,75px 75px,15px 15px,15px 15px;

 

波点背景

【圆点阵列】

　　前面，一直在用线性渐变生成图案。可是，径向渐变一样也是很是实用的，由于它容许建立圆形、椭圆，或是它们的一部分。径向渐变可以建立的最简单的图案是圆点阵列

  background: #655;
  background-image:radial-gradient(tan 30%,transparent 0);
  background-size: 30px 30px;  

【波点图案】

　　能够生成两层圆点阵列图案，并把它们的背景定位错开，这样就能够获得真正的波点图案

  background: #655;
  background-image:radial-gradient(tan 30%,transparent 0),radial-gradient(tan 30%,transparent 0);
  background-size: 30px 30px;
  background-position: 0 0 ,15px 15px;

　　为了达到效果，第一层背景的偏移定位值必须是贴片宽高的一半。这意味着若是要改动贴片的尺寸，须要修改四处

　　最好使用SASS将它转换成mixin

@mixin polka($size,$dot,$base,$accent){
  background: $base;
  background-image:radial-gradient($accent $dot,transparent 0),radial-gradient($accent $dot,transparent 0);
  background-size: $size $size;
  background-position: 0 0 ,$size/2 $size/2;  
}  

@include polka(30px,30%,$655,tan);  

 

棋盘背景

　　棋盘图案在不少场景下都会用到。好比说，相对于单调的纯色背景来讲，具备细微对比度的棋盘图案可能就是一个有趣的替代品。在各类应用程序的界面中，灰色的棋盘图案已是用于表示透明色的事实标准

【CSS】

  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-size: 30px 30px;
  background-position: 0 0 ,15px 15px,15px 15px,30px 30px;

　　这段代码还能够稍稍优化，能够把这些处在贴片顶角的三角形两两组合起来(即把第一组和第二组合并为一层渐变，把第三组和第四组合并为一层渐变)，而后还能够把深灰色改为半透明的黑色——这样只须要修改底色就能够改变整个棋盘的色调，不须要单独调整各层渐变的色标了 

  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-size: 30px 30px;
  background-position: 0 0 ,15px 15px;

　　下面来使用SASS的mixin来简化代码

  @mixin checkerboard($size,$base,$accent:rgba(0,0,0,0.25)){
    background:$base;
    background-image: linear-gradient(45deg,$accent 25%,transparent 0,transparent 75%,$accent 0),linear-gradient(45deg,$accent 25%,transparent 0,transparent 75%,$accent 0);
    background-size: 2*$size 2*$size;
    background-position: 0 0 ,$size $size;    
  }
  @inclue checkerboard(15px,#58a,tan);

【SVG】

　　这样的代码量不能算少，因此转到SVG方案多是更好的选择 

<svg xmlns="http//www.w3.org/2000/svg" width="100" height="100" fill-opacity=".25">
  <defs>
    <pattern id="pattern1" width=0.2 height=0.2 >
      <rect x="10" width="10" height="10"/>
      <rect y="10" width="10" height="10"/>
    </pattern>
  </defs>
   <rect id="rect1" x="0" y="0" width="100" height="100" fill="url(#pattern1)" />
</svg>  

　　可能有人会说，CSS渐变能够节省HTTP请求。但实际上，能够把SVG文件以dataURL的方式内嵌到样式表中

　　[注意]SVG中的标签的属性值必定要添加引号，不然经过dataURL的方式引入的SVG文件没法显示成功

div{
    height: 100px;
    width: 100px;
    background: url('data:image/svg+xml,\
    <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill-opacity=".25">\
      <defs>\
        <pattern id="pattern1" width="0.2" height="0.2" >\
          <rect x="10" width="10" height="10"/>\
          <rect y="10" width="10" height="10"/>\
        </pattern>]\
      </defs>\
      <rect id="rect1" x="0" y="0" width="100" height="100" fill="url(#pattern1)"/>\
    </svg>');
}

 

伪随机背景

　　重现随机性是一个挑战，由于CSS自己没有提供任何随机功能。以条纹为例子。假设获得不一样颜色和不一样宽度的垂直条纹，而且不能让人看出贴片平铺时的接缝。第一个想法可能就是建立一个具备四种颜色的条纹图案

  background:linear-gradient(90deg,#fb3 15%,#655 0, #655 40%,#ab4 0, #ab4 65%, hsl(20,40%,90%) 0);
  background-size: 80px 100%;

　　为了更真实地模拟条纹的随机性，把这组条纹从一个平面拆散为多个图层：一种颜色做为底色，另三种颜色做为条纹，而后再让条纹以不一样的间隔进行重复平铺

  background: hsl(20,40%,90%);
  background-image:linear-gradient(90deg,#fb3 10px,transparent 0),
  linear-gradient(90deg,#ab4 20px,transparent 0),
  linear-gradient(90deg,#655 20px,transparent 0);
  background-size: 80px 100%,60px 100%,40px 100%;

　　由于最顶层贴片的重复规律最容易被察觉，应该把平铺间距最大的贴片安排在最顶层

　　这里贴片的尺寸实际上就是全部background-size的最小公倍数，而40、60和80的最小公倍数正是240

　　根据这个逻辑，要让这种随机性更加真实，得把贴片的尺寸最大化。为了让最小公倍数最大化，这些数字最好是"相对质数。在这种状况下，它们的最小公倍数就是它们的乘积

　　下列代码中，平铺贴片的尺寸如今是41×61×83=207583像素，比任何屏幕分辨率都要大。这个技巧被定名为“蝉原则”

  background: hsl(20,40%,90%);
  background-image:linear-gradient(90deg,#fb3 11px,transparent 0),
  linear-gradient(90deg,#ab4 23px,transparent 0),
  linear-gradient(90deg,#655 41px,transparent 0);
  background-size: 41px 100%,61px 100%,83px 100%;

 

斑马线背景

　　下面的斑马线背景是与文本紧密结构的一种背景图案

  padding:.5em;
  line-height: 1.5;
  background:beige linear-gradient(rgba(0,0,0,0.2) 50%,transparent 0) content-box 0 0/ auto 3em;