如何在背景速記規則上使用線性漸變？

Question

爲什麼我得到不同的結果與此：

body { 
    background: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), 
    linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black) 0 0, 30px 30px/60px 60px #eee; 
} 

，而試圖得到的結果我這個得到：

body { 
    width: 100px; 
    height: 100px; 
    background-color: #eee; 
    background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), 
    linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black); 
    background-size: 60px 60px; 
    background-position:0 0, 30px 30px; 
} 

？

codepen

Answer 1

這個簡短的手將是：

body { 
 
    background: 
 
    0 0/60px 60px linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), 
 
    30px 30px/60px 60px linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black) #eee; 
 
}

你需要爲每個背景圖片的位置和大小

Answer 2

你剛剛語法稍有錯在這裏：

background: linear-gradient(45deg, black 25%, transparent 25%, 
       transparent 75%, black 75%, black), 
      linear-gradient(45deg, black 25%, transparent 25%, 
       transparent 75%, black 75%, black) 0 0, 30px 30px/60px 60px #eee; 
                ^^^ 

這逗號這裏是錯的 - 它需要結束

   transparent 75%, black 75%, black) 0 0 30px 30px/60px 60px #eee;