如何为多个背景“棋盘+中心线”设置不同的尺寸

问题描述 投票:0回答:1

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

但是棋盘背景不是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>

css background size
1个回答
0
投票

您设置的是位置,而不是大小。正确的语法是

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>

© www.soinside.com 2019 - 2024. All rights reserved.