今天娃娃來和大家一起畫桌布侥祭，各種各樣的格子桌布和點(diǎn)點(diǎn)桌布
總的來說叁执，就是鋪上幾層不同的background，把多個(gè)漸變圖案組合起來矮冬，讓它們透過彼此的透明區(qū)域顯示出來谈宛。
來先畫個(gè)紅格子噠：
CSS Secrets @復(fù)雜的背景圖案 - CSS娃娃 - CSS娃娃的博客
寶寶們一眼就能看出來，這個(gè)紅格子是通過一個(gè)個(gè)橫條和一個(gè)個(gè)豎條組成的胎署，而且寬度一樣吆录。。琼牧。
background: #fff;
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;
當(dāng)然恢筝，我們也可以把百分比換成固定的寬度哀卫，比如這樣：
CSS Secrets @復(fù)雜的背景圖案 - CSS娃娃 - CSS娃娃的博客
background: #58a;
background-image: linear-gradient(90deg, #fff 1px, transparent 0),
linear-gradient(#fff 1px, transparent 0);
background-size: 30px 30px;
然而這樣的格子還是顯得有些單調(diào)，那好辦撬槽，多鋪上兩層此改，改變一下background-size再看一下效果：
background: #58a;
background-image: linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 0),
linear-gradient(rgba(255,255,255,.3) 1px, transparent 0),
linear-gradient(90deg, #fff 2px, transparent 0),
linear-gradient(#fff 2px, transparent 0);
background-size: 15px 15px, 15px 15px, 60px 60px, 60px 60px;
CSS Secrets @復(fù)雜的背景圖案 - CSS娃娃 - CSS娃娃的博客
那格子基本上就會(huì)畫了吧？
華麗麗分割一下
下面來看點(diǎn)點(diǎn)侄柔。共啃。。
每個(gè)圓點(diǎn)都可以通過徑向漸變radial-gradient()來生成
background: #655;
background-image: radial-gradient(tan 30%, transparent 0);
background-size: 30px 30px;
CSS Secrets @復(fù)雜的背景圖案 - CSS娃娃 - CSS娃娃的博客
但是這個(gè)波點(diǎn)看上去傻傻的暂题，怎么看都覺得不對(duì)勁移剪。沒錯(cuò)，因?yàn)椴]有一行隔一行錯(cuò)開排列薪者。
那既然說到”錯(cuò)開“纵苛，只需要在原有的background上鋪上一層一模一樣的，然后通過background-position來調(diào)整位置就OK啦言津！
background: #655;
background-image: radial-gradient(tan 25%, transparent 0),
radial-gradient(tan 25%, transparent 0);
background-size: 30px 30px;
background-position: 0 0, 15px 15px;
CSS Secrets @復(fù)雜的背景圖案 - CSS娃娃 - CSS娃娃的博客
