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

Question

我正在尝试使用背景图像创建一个表格模式，当单元格大小为 50px * 50px 时它可以正常工作，但是当我低于 25px * 25px 时，几行开始消失或晕倒。

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

25 像素 * 25 像素

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

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

标签： cssbackground-image

Answer 1

我能想到的唯一方法是将您的宽度和高度设置为带有变量的数学大小。

例如你的身高会像 height: $someSize * 10; background-size: $someSize $someSize ;