任務(wù)八部分background問(wèn)題
/*任務(wù)八、設(shè)置導(dǎo)航當(dāng)前狀態(tài)與懸浮狀態(tài)下的背景效果*/
.nav-menu?li?.active?.front,
.nav-menu?li?.active?.back,
.nav-menu?li?a:hover?.front,
.nav-menu?li?a:hover?.back?{
????background-color:?#51938f;
????background-size:?5px?5px;
????background-position:?0?0,?30px?30px;
????background-image:?-moz-linear-gradient(45deg,?#478480?25%,?transparent?25%,?transparent?75%,?#478480?75%,?#478480),?linear-gradient(45deg,?#478480?25%,?transparent?25%,?transparent?75%,?#478480?75%,?#478480);
????background-image:?-ms-linear-gradient(45deg,?#478480?25%,?transparent?25%,?transparent?75%,?#478480?75%,?#478480),?linear-gradient(45deg,?#478480?25%,?transparent?25%,?transparent?75%,?#478480?75%,?#478480);
????background-image:?-o-linear-gradient(45deg,?#478480?25%,?transparent?25%,?transparent?75%,?#478480?75%,?#478480),?linear-gradient(45deg,?#478480?25%,?transparent?25%,?transparent?75%,?#478480?75%,?#478480);
????background-image:?linear-gradient(45deg,?#478480?25%,?transparent?25%,?transparent?75%,?#478480?75%,?#478480),?linear-gradient(45deg,?#478480?25%,?transparent?25%,?transparent?75%,?#478480?75%,?#478480);
}color和size都只有一份，為什么position和image（顏色漸變）這就成兩份了？而且漸變的兩部分是完全一樣的（不考慮前綴的話）。
2019-04-28
這里作者可能原本是想在背景上疊加兩個(gè)漸變（盡管兩個(gè)漸變語(yǔ)句是一樣的），因?yàn)橐粋€(gè)linear-gradient漸變就相當(dāng)于是一張不同的背景圖片，所以在background-position里要分別對(duì)這兩個(gè)圖片設(shè)置起始位置。
但是因?yàn)轭}目代碼里background-size: 5px 5px和background-position: 0 0, 30px 30px值的關(guān)系，這兩個(gè)漸變最終重合在一起了（因?yàn)?0px是5px的倍數(shù)），形成的圖片效果就是下圖單元縮小后repeat覆蓋整個(gè)span后的效果：
但是如果把background-size或background-position的值調(diào)整一下，譬如：background-size: 20px 20px。這樣兩個(gè)漸變就不會(huì)重合在一起，就會(huì)形成馬賽克一樣的圖案：
上圖效果每個(gè)小格尺寸為10px。
希望能有些幫助吧