CSS背景效果_ZenDei技術網路在線

[1]條紋背景 [2]網格背景 [3]波點背景 [4]棋盤背景 [5]偽隨機背景 [6]斑馬線背景 ...

前面的話

　　本文將詳細介紹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本身沒有提供任何隨機功能。以條紋為例子。假設得到不同顏色和不同寬度的垂直條紋，並且不能讓人看出貼片平鋪時的接縫。第一個想法可能就是創建一個具有四種顏色的條紋圖案

  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;