当图案尺寸较小时，背景图像重复图案显示出副作用

Question

我正在尝试使用背景图像创建一个 table 图案，当单元格大小为 50px * 50px 时效果很好，但当我低于 25px * 25px 时，几行开始消失或晕倒。

这背后的原因是什么？如何解决？

At 25px * 25px

At 50px * 50px

div {
  background: pink;
  height: 713px;
  width: 400px;
  background-size: 25px 25px;
  /*background-size: 50px 50px;*/
  background-image: url("https://svgshare.com/i/_GG.svg");
}

<div></div>

代码笔：https://codepen.io/arnavsingh/pen/bGWPqXP

注意：当我使用浏览器设置放大时它会得到修复

Answer 1

我能想到的唯一方法是使用变量将宽度和高度设置为某个数学大小。

例如你的身高应该是 height: $someSize * 10; background-size: $someSize $someSize ;

Answer 2

可能是因为你的 svg 中的线条无法以较小的尺寸呈现（因为边框变得小于 1px）。

为什么不尝试使用线性渐变（将 25px 更改为您想要的任何大小的正方形）：

div {
  height: 713px;
  width: 400px;
  background:
    repeating-linear-gradient(to right,
        transparent 0  calc(25px - 1px),
        #AA8087 calc(25px - 1px) 25px),
        
    repeating-linear-gradient(to bottom,
        transparent 0 calc(25px - 1px),
        #AA8087 calc(25px - 1px) 25px)     
    #FFC0CB;
}

<div></div>

Answer 3

这样的任务现在很简单，只有一个梯度：

div {
  background: pink;
  height: 713px;
  width: 400px;
  --b:1px; /* adjust this */
  background:
    conic-gradient(at bottom var(--b) right var(--b),#000 75%,#0000 0) 
    0 0/25px 25px /* and this */
    pink;
}

<div></div>

当图案尺寸较小时，背景图像重复图案显示出副作用

background-image repeat pattern is showing side effects when pattern size is small

css

background-image