神奇的background——繪製圖形

相信你們在平時工做中少不了會被要求在某些元添加一些特殊的背景圖片，這時候一般就拿起ps就是切切切。不說這種方式麻煩，有ui給你切好的狀況已經不錯，沒有的就有本身動手。還可能有須要切一整張超大圖的狀況。做爲一個「優秀」的前端，本着本身動手豐衣足食的理念，下面給你們介紹用background來繪製這些特的圖片。

---

先來看看平時會出現的

趕上這種狀況，一般處理就是切得下面的圖片

再經過一下css獲得

<div class="box"></div>

<style>
  .box{
    width: 500px;
    height: 500px;
    background: url('imgurl');
    background-size: 20%;
  }
</style>

固然如今不切圖，直接用css來作

.box{
    width: 500px;
    height: 500px;
    background: linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb),
                linear-gradient(135deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb) 50px 0,
                linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb) 50px 50px,
                linear-gradient(135deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb) 100px 50px;
    background-size: 100px 100px;
    background-color: #fff;
}

咱們能夠看到會獲得與切圖如出一轍的效果

接下來來看下上面的css爲何這樣寫
首先咱們先理解background: linear-gradient()，在background中CSS3 漸變（gradients）可看作一張背景圖片，可理解爲background: url()，而背景圖片的能夠爲多張的，對應咱們就能夠寫多個linear-gradient，經過對其顏色的控制來拼接成一個獨立的圖片塊。background-size刷新中可經過逗號分隔，會循環設置對應的linear-gradient。
這裏須要注意的是，linear-gradient是重後往前繪製的，就是說前面顏色的會覆蓋後面的顏色。

分析上面的格子背景，我看能夠看作在一個4x4的格子中有兩個1x1的灰格子覆蓋在上面。每一個灰格子可經過
的基礎圖案拼成，因此有了以下

background: linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb),
            linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb) 50px 50px;

這裏有個問題，小三角間拼接有縫隙，因此用
圖形再拼接一次。

background: linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb),
            linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb) 50px 50px,
            linear-gradient(135deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb) 50px 0,
            linear-gradient(135deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb) 100px 50px;

最後咱們就能獲得和上面同樣的格子背景。
更多例子

有時候咱們須要的背景可能不須要repeat，且圖形沒有規律
如：

這時咱們就要對圖形的每一個角進行分別設置。

.box{
    width: 500px;
    height: 500px;
    background: linear-gradient(black, black) left top,
                linear-gradient(black, black) left top,
                linear-gradient(black, black) right top,
                linear-gradient(black, black) right top,
                linear-gradient(black, black) right bottom,
                linear-gradient(black, black) right bottom,
                linear-gradient(black, black) left bottom,
                linear-gradient(black, black) left bottom;
    background-repeat: no-repeat;
    background-size: 4px 20px, 20px 4px;

原理其實就是經過linear-gradient繪製每一個圖形設置位置和大小，最後就能獲得想要圖像。

之後當咱們趕上一些特殊的背景圖後就能經過css來實現它呢。