我想仅使用一个背景属性来完成此操作。
但是棋盘背景不是64 x 64,而是384 x 256尺寸
棋盘必须_BE 64 x 64
这是我的尝试:
<!DOCTYPE html><style>
body { margin:0; background-color:#000 }
div {
width: 768px;
height: 512px;
background: conic-gradient(from 90deg at 1px 1px,#0000 90deg,#5a5 0) 384px 256px,
repeating-conic-gradient(#a55 0% 25%, #105 25% 50%) 64px 64px
}
</style><div></div>
您设置的是位置,而不是大小。正确的语法是
position / size
,其中 size
是可选的。
body {
margin: 0;
background-color: #000
}
div {
width: 768px;
height: 512px;
background:
conic-gradient(from 90deg at 1px 1px, #0000 90deg, #5a5 0) 0 0/384px 256px,
repeating-conic-gradient(#a55 0% 25%, #105 25% 50%) 0 0/64px 64px
}
<div></div>