CSS3中的 Background:linear-gradien

本文参考自css only muti-color background如有兴趣的同学可以去看看这篇文章

这篇文章主要通过几个例子看看linear-gradient()的具体用法对linear-gradient的基础知识不做过多的介绍如有兴趣的同学可以出门左拐到mdn查看具体用法。ok话不多说让我们来看看awesome linear-gradient。

1. 首先是一般的渐变

div{
  background:linear-greadient(70deg,#0f0 0%, 00f 100%);
}

效果图

比较简单不做过多的解释

2. 颜色块渐变

  div{ 
    background:linear-gradient(30deg,#00d 60%,#0aa 60%);
}

效果图

这里有一个地方需要我们注意的就是两个渐变的颜色位置要在同一位置，或者后一个渐变的位置小于前一个渐变的位置。至于原因很简单，想象一下前后两个渐变分别为两张纸，前一个渐变在上，后一个渐变在下，此时只要后一个渐变位置在前一个的前面那么前一个渐变就能将后一个渐变的一部分遮盖住，从而看起来是两个渐变有个明显的边界，如果后一个渐变位置比前一个要靠后那么此时两个渐变之间就有了空隙，只要有了空袭则两边的颜色要网中间填充就会形成渐变过度，也就不能实现我们效果图上面的这种边界明显的色块效果了。

如下图所示

位置重叠

位置相交

位置相离

3. 多个色块

div{
  background: -webkit-linear-gradient(110deg, #000 33%, rgba(0,0,0,0) 33%), -webkit-linear-gradient(110deg, #dd0000 66%, #ffc608 66%);
}
   

这里为了达到效果运用了在同一个北京中运用了两个线性渐变，这里我们需要注意的是，第一个线性渐变我们使用了rgba(0,0,0,0)定义了一个全透明的颜色，目的是为了让后一个渐变的颜色显现出来不会被第一个颜色所遮挡。

4. 在渐变后定义背景颜色

  #div3{
    background:linear-gradient(-110deg,#a0a 30%,rgba(0,0,0,0) 30%),url('https://www.nasa.gov/sites/default/files/thumbnails/image/pia21421-cr.jpg');
    background-size:cover;
    background-position:top left;
}

此处我们要将希望显现出背景色的区域颜色定义为透明色。而且一定不能忘了设置bakckground-size为cover，否则的话背景无法显现。根据MDN上面的解释是因为浏览器渲染的问题。

5. 弧型渐变

#div4{
    background: linear-gradient(110deg, #260af8 40%, rgba(0, 0, 0, 0.1) 40%), radial-gradient(farthest-corner at 0% 0%, #7a00cc 60%, #c03fff 60%);

没什么好说的这个东东，主要运用了radial-grediant也就是径向渐变。

5. 多个色块不懂角度渐变这个跟第三个原理一样只不过是需要改变一下角度值。