任務八部分background問題
/*任務八、設置導航當前狀態與懸浮狀態下的背景效果*/
.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
這里作者可能原本是想在背景上疊加兩個漸變（盡管兩個漸變語句是一樣的），因為一個linear-gradient漸變就相當于是一張不同的背景圖片，所以在background-position里要分別對這兩個圖片設置起始位置。
但是因為題目代碼里background-size: 5px 5px和background-position: 0 0, 30px 30px值的關系，這兩個漸變最終重合在一起了（因為30px是5px的倍數），形成的圖片效果就是下圖單元縮小后repeat覆蓋整個span后的效果：
但是如果把background-size或background-position的值調整一下，譬如：background-size: 20px 20px。這樣兩個漸變就不會重合在一起，就會形成馬賽克一樣的圖案：
上圖效果每個小格尺寸為10px。
希望能有些幫助吧