6年不研究CSS發現很多現功能都沒有用過，例如漸變色，彈性盒子等，年前做過一個簡單的管理系統，由于本人美工不好，設計不出好看的背景圖片，偶然百度到背景圖片可以使用漸變色（感覺發現了新大陸）。以后的項目中也用過幾次，每次都要百度，這里系統學習一下，并記下筆記，方便下次復習。

　　（1）雙色漸變，默認方向是向下的效果如下圖

      background-image: linear-gradient(green,white);

（2）可以通過關鍵字to right,to left ,to bottom ,to top改變漸變方向，也可以根據角度改變(0-360度)；

　　　　（3）多色漸變 ，效果如下圖

　　　　background-image: linear-gradient(to right,green,yellow,white);  

      background-image: linear-gradient(45deg,green,yellow,grey);

      background-image: linear-gradient(135deg,green,yellow,grey);

（4） 指定漸變的尺寸（位置），（方向，顏色1 尺寸1，顏色 2尺寸2，...，顏色n 尺寸n）

         background-image: linear-gradient(135deg,green 10%,yellow 40%,grey 80%);

　　　　解釋：百分比代表的是開始的位置，上述命令的解釋為：向135度方向漸變，10%之前為純綠色，10%到 40%為綠到黃漸變，40%到 80%為黃到灰漸變，80%以后為純灰色。

（5）重復漸變：repeating-linear-gradient，重復的是漸變色，如果不是漸變則不會重復，例如 ：

             repeating-linear-gradient(0deg,red 15px,white 15px);  //不存在漸變，因為15像素之前是純紅色，15像素之后為純白色，因為兩種顏色的開始位置重合了，也就是漸變的像素距離為0，效果如下圖

             background-image: repeating-linear-gradient(0deg,red 15px,white 80px);    兩種三顏色漸變的起始位置有像素差，存在漸變，也可以重復，效果如下

　　　　　　　　　　　　

（6）相等的顏色也可以漸變，顧等色也可以重復漸變，有了這個理論，我們就可以做相間條紋圖案；

               background-image: repeating-linear-gradient(-50deg,red 0px,red 15px,white 15px,white 30px,blue 30px,blue 45px,white 45px,white 60px);
               解釋0-15 紅色到紅色的漸變，15-30 白色到白色的家變，30-45 藍色到藍色漸變，45-60 白色到白色漸變；加上重復漸變和角度，效果如下圖。

　　　　

總結

以上是生活随笔為你收集整理的css 3 背景图片为渐变色（渐变色背景图片） 学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。