如何在背景 shorthand 规则上使用线性渐变?
how to use linear-gradient on a background shorthand rule?
为什么我会得到不同的结果:
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;
}
?
你刚才的语法有点错误:
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;
简写为:
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;
}
您需要为每个背景图片设置位置和大小
为什么我会得到不同的结果:
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;
}
?
你刚才的语法有点错误:
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;
简写为:
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;
}
您需要为每个背景图片设置位置和大小