如何在背景速记规则上使用线性渐变？

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;