Css 如何为多个背景和棋盘设置不同的大小

发布于12月15日

我只想使用一个背景属性来完成此操作.

但棋盘背景不是64x64，而是384x256大小

棋盘必须为64 x 64

这是我的try :

<!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是可选的.

并且您可以使用50% 50%作为第一个渐变的大小，不需要手动计算

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/50% 50%, 
   repeating-conic-gradient(#a55 0% 25%, #105 25% 50%) 0 0/64px 64px
}