隻使用一個漸變時，我們能創建的圖案并不多。當我們把多個漸變圖案組合起來，讓它們透過彼此的透明區域顯示出來時，神奇的事情發生了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>複雜的背景圖案</title>
<style>
.box{
width: 150px;
height: 150px;
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;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
在某些情況下，我們希望網格中每個格子的大小可以調整，而網格線條的粗細同時保持固定。
這裡我們使用長度而不是百分比：
background: #58a;
background-image:
linear-gradient(white 1px, transparent 0),
linear-gradient(90deg, white 1px, transparent 0);
background-size: 30px 30px;
當我們需要改變網格的尺寸時、線寬或者任何顔色時，我們可以很容易地找到需要編輯的地方。
改變圖案的任何一個要素時，我們不需要做大量的修改，而是隻需要修改一到兩個值。
background: #58a;
background-image:
linear-gradient(white 2px, transparent 0),
linear-gradient(90deg, white 2px, transparent 0),
linear-gradient(hsla(0, 0%, 100%, .3) 1px, transparent 0),
linear-gradient(90deg, hsla(0, 0%, 100%, .3) 1px, transparent 0);
background-size: 75px 75px, 75px 75px, 15px 15px, 15px 15px;
不同線寬，不同顔色網格圖案疊加
波點這裡我們用到徑向漸變radial-gradient，它允許我們創建圓形、橢圓、或是它們的一部分。
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;
這裡的竅門是用兩個直角三角形來拼出我們想要的方塊。
background: #eee;
background-image:
linear-gradient(45deg, #bbb 50%, transparent 0);
background-size: 30px 30px;
接着我們希望這個三角形隻占據貼片面積的1/8,而不是1/2。我們把色标的位置從50%改為25%
background-image:
linear-gradient(45deg, #bbb 25%, transparent 0);
同理，如果我們把這兩個色标順序逆轉，就可以得到：
background-image:
/*linear-gradient(45deg, #bbb 25%, transparent 0);*/
linear-gradient(45deg, transparent 75%, #bbb 0);
接着我們把這兩個組合在一起：
background-image:
linear-gradient(45deg, #bbb 25%, transparent 0),
linear-gradient(45deg, transparent 75%, #bbb 0);
這時我們把第二層漸變在水平位置和垂直發方向均移動貼片大小的一半，就可以得到一個完整的方塊。
background: #eee;
background-image:
linear-gradient(45deg, #bbb 25%, transparent 0),
linear-gradient(45deg, transparent 75%, #bbb 0);
background-position: 0 0, 15px 15px;
background-size: 30px 30px;
這裡我們就完成了棋盤的一半，我們隻需要把現有的這一組漸變再重複一份即可，并且編譯它們的定位值。
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-position: 0 0, 15px 15px, 15px 15px, 30px 30px;
background-size: 30px 30px;
這樣我們就得到了我們想要的棋盤。
,更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!
zpostcode 
Recruit 
weather 
mreligion 
Yellowpages 
sport 
constellation 
shopping 
name 
game 
directory 
literature 
Word 
tour 
furnish 
Lottery 
tftnews 
lyrics 
News 
digital 
car 
dir 
Edu 
Finance 
