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;