Question

我试图让背景看起来像一个圆圈网格。我需要它是可配置的，所以我想在CSS中这样做，而不是只使用图像。截至目前，我通过径向梯度实现了这一目标。

radial-gradient(black 3px, white 3px);

我遇到了一个问题。它可配置的部分原因是用户可以向上/向下扩展所有内容。当它缩小太多时，它变得不可见。当我将圆圈设置为.6 x .6

时会发生这种情况

https://jsfiddle.net/joLt26u0/

最小尺寸：

＆＃13;

var background = document.querySelector(".dotBackground");

// invisible
// background.style.backgroundImage = `radial-gradient(black ${.6}px, white ${.6}px)`;

// smallest while still visible
background.style.backgroundImage = `radial-gradient(black ${.7}px, white ${.7}px)`;

＆＃13;

.dotBackground{
  position:absolute;
  height:100%;
  width:100%;
  background-size: 40px 40px;  
}

＆＃13;

<div class="dotBackground"></div>

＆＃13;

不可见：

＆＃13;

var background = document.querySelector(".dotBackground");

// invisible
background.style.backgroundImage = `radial-gradient(black ${.6}px, white ${.6}px)`;

// smallest while still visible
// background.style.backgroundImage = `radial-gradient(black ${.7}px, white ${.7}px)`;

＆＃13;

.dotBackground{
  position:absolute;
  height:100%;
  width:100%;
  background-size: 40px 40px;  
}

＆＃13;

<div class="dotBackground"></div>

＆＃13;

我无法弄清楚为什么会这样。有谁知道为什么会这样或者解决方案？如果没有，是否有可以用来实现同样的东西的替代CSS？我只需要一个圆圈的网格背景，我可以配置点/点之间的颜色/空间。

当尺寸较小时，径向梯度有时不可见

0 个答案: