第使用CSS實(shí)現(xiàn)黑白格背景效果在頁面上，有時(shí)會(huì)需要展示一些透明背景的圖片，為了展示其透明的背景，通常會(huì)像PS一樣，使用黑白相間的格子組成背景，從而告訴用戶，這是一張透明的圖片。

1.利用漸變(background:linear-gradient())的效果來實(shí)現(xiàn)黑白相間，如下代碼：

style

#app{

width:200px;

height:200px;

background:linear-gradient(

rgba(0,0,0,0.4)25%,

transparent25%,

transparent75%,

rgba(0,0,0,0.4)75%,

rgba(0,0,0,0.4)100%

/style

/head

body

divid=app/div

/body

效果：

2.然后加以旋轉(zhuǎn)，使?jié)u變背景傾斜，代碼：

#app{

width:200px;

height:200px;

background:linear-gradient(

45deg,

rgba(0,0,0,0.4)25%,

transparent25%,

transparent75%,

rgba(0,0,0,0.4)75%,

rgba(0,0,0,0.4)100%

}

效果：

3.然后設(shè)置背景大小，并且使其自動(dòng)平鋪填充background-repeat:repeat;,因?yàn)槟J(rèn)就是平鋪，所以不用特地設(shè)置這個(gè)值，只需設(shè)置背景大小即可：

#app{

width:200px;

height:200px;

background:linear-gradient(

45deg,

rgba(0,0,0,0.4)25%,

transparent25%,

transparent75%,

rgba(0,0,0,0.4)75%,

rgba(0,0,0,0.4)100%

background-size:20px20px;

}

效果：

4.通過以上操作，發(fā)現(xiàn)基本實(shí)現(xiàn)了一半的效果，畢竟需求是方格，而不是三角形，那么每個(gè)格子只需要再來一個(gè)三角形即可，為了方便區(qū)分，另一個(gè)顏色先設(shè)置為red:

#app{

width:200px;

height:200px;

background:linear-gradient(

45deg,

rgba(0,0,0,0.4)25%,

transparent25%,

transparent75%,

rgba(0,0,0,0.4)75%,

rgba(0,0,0,0.4)100%

linear-gradient(

45deg,

red25%,

transparent25%,

transparent75%,

red75%,

red100%

}

效果：

5.可以看到，兩種漸變重疊在一起，這時(shí)候需要分別設(shè)置兩種漸變起始位置，使其分開，為了實(shí)現(xiàn)這個(gè)效果，將紅色漸變的起始位置向左、向下平移背景大小一半的距離：

#app{

width:200px;

height:200px;

background:linear-gradient(

45deg,

rgba(0,0,0,0.4)25%,

transparent25%,

transparent75%,

rgba(0,0,0,0.4)75%,

rgba(0,0,0,0.4)100%

linear-gradient(

45deg,

red25%,

transparent25%,

transparent75%,

red75%,

red100%

background-position:00,100px100px;

}

效果：

6.到此為止，已經(jīng)實(shí)現(xiàn)我們需要效果了，接下來只需要將紅色設(shè)置為灰色，然后設(shè)置背景的大小，將背景平鋪即可，完整代碼如下：

#app{

width:200px;

height:200px;

background:linear-gradient(

45deg,

rgba(0,0,0,0.4)25%,

transparent25%,

transparent75%,

rgba(0,0,0,0.4)75%,

rgba(0,0,0,0.4)100%

linear-gradient(

45deg,

rgba(0,0,0,0.4)25%,

transparent25%,

transparent75%,

rgba(0,0,0,0.4)75%,

rgba(0,0,0,0.4)100%

/*背景大小必須小于盒子的大小*/

backgroun