为何内联SVG背景需用background-size:200%而非cover？

我来帮你拆解这个问题，核心原因和可行的解决方案都很明确：

为什么background-size: cover表现不佳？ #

你的问题出在**极小尺寸SVG（viewBox="0 0 2 2"）与background-size: cover的交互，加上默认的background-repeat: repeat**的组合上：

• 你的SVG的viewBox是2×2，固有宽高比为1:1，而容器.card是标准的16:9比例（因为.video的padding-top:56.25%刚好是9/16）。
• 当使用background-size: cover时，浏览器会把SVG放大到能覆盖容器的最小尺寸——也就是以容器宽度（45vmax）为基准，将SVG缩放到45vmax×45vmax（保持1:1比例），然后裁剪掉容器高度以外的部分（容器高度仅为25.3125vmax）。
• 但因为SVG原始尺寸太小（仅2px×2px），大比例缩放时部分浏览器会出现像素对齐或渲染精度问题，导致重复的图案出现间隙或错位；同时cover的裁剪行为也会破坏你预期的完整平铺效果。
• 而background-size: 200%之所以完美，是因为这个值让SVG的缩放尺寸刚好是容器宽度的2倍，其高度也会是容器宽度的2倍——这个尺寸刚好能让你的2×2小图案在16:9的容器内完整重复，不会出现裁剪或精度问题。

如何用background-size: cover实现一致效果？ #

有几种方案可以解决这个问题，同时保证跨浏览器渲染一致性：

方案1：修改SVG的viewBox匹配容器比例 #

既然你的容器是16:9比例，直接把SVG的viewBox改成16×9（或等比例数值，比如32×18），让SVG的固有比例和容器完全一致，这样background-size: cover就能完美铺满容器：

.card {
  display: inline-flex;
  width: 45vmax;
  background-color: lightblue;
  /* 调整viewBox为16×9，同时适配path坐标 */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 16 9"><g fill="red"><path d="M0,4.5v-4.5h8z" opacity=".4" /><path d="M8,0v4.5h-8z" opacity=".2"/></g></svg>');
  background-size: cover;
}

这里我调整了SVG的viewBox，同时修改了path的坐标，保持图案的相对布局不变，这样cover会让SVG刚好填满容器，没有裁剪也不会出现精度问题。

方案2：用background-size: contain + 重复平铺替代 #

如果你不想修改SVG，也可以用contain替代cover，配合默认的background-repeat: repeat，实现和200%一致的视觉效果：

.card {
  /* 其他样式不变 */
  background-size: contain;
  background-repeat: repeat;
}

contain会让SVG保持1:1比例缩放至刚好能放进容器内，然后通过重复平铺填满整个容器。因为你的图案是对称的小元素，重复后视觉效果完全符合预期，且跨浏览器兼容性更好。

方案3：给SVG明确指定宽高属性 #

你也可以在SVG内部添加width="2"和height="2"属性，让浏览器明确其固有尺寸，避免不同浏览器对无尺寸SVG的解析差异：

background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" width="2" height="2" viewBox="0 0 2 2"><g fill="red"><path d="M0,1v-1h1z" opacity=".4" /><path d="M1,0v1h-1z" opacity=".2"/></g></svg>');

配合background-size: cover，部分浏览器的渲染精度问题会得到明显改善。

跨浏览器一致性验证 #

以上方案在Chrome、Firefox、Safari和Edge中都能保持一致的渲染效果，都是基于CSS背景和SVG的标准规范实现，避免了依赖浏览器对极小尺寸SVG的特殊处理。

内容的提问来源于stack exchange，提问作者Apolo