如何在 Firefox 中使用带点值的背景大小

Question

我正在使用这张 CSS 背景图片在我的 DIV 上显示平铺图案。

background-image: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1) 1px, transparent 1px, transparent 20px), repeating-linear-gradient(-90deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1) 1px, transparent 1px, transparent 20px);

在后台使用一个框架 (react-grid-layout) 相应地映射这些图块。基于 React Grid Layout 中的值，我计算了映射的图块（长度和宽度），结果是一个点值。我将这个长度和宽度与 background-size 一起使用，以直观地显示正确的图块大小。

background-size: 12.4016px 12px;

对于 Google Chrome，这不是问题，并且会导致底层网格的正确表示。在 Firefox 下，磁贴是扭曲的。有解决办法吗？

Answer 1

试试比 1px

稍微大一点的值

html {
  background: 
    linear-gradient(  0deg, rgba(0, 0, 0, 0.1) 1.3px, transparent 0), 
    linear-gradient(-90deg, rgba(0, 0, 0, 0.1) 1.3px, transparent 0);
  background-size: 12.4016px 12px;
}

Answer 2

与@termaniAfif 类似的方法

您可以增加重复渐变大小，因此 FF 在 (神秘;)) 渲染计算通过背景大小进行后仍然有一些东西要显示。

html {
  min-height: 100vh;
  background-color: white;
  background-image: 
      repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1) 1px, transparent 2px, transparent 30px), 
      repeating-linear-gradient(-90deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1) 1px, transparent 2px, transparent 30px);
  background-size: 12.4016px 12px;
}

repeating-gradient increased from 20px to 30px

如何在 Firefox 中使用带点值的背景大小

how to use background-size with point values in Firefox

css

firefox

google-chrome