为什么这个background-size 100 100 不生效？

Question

这个背景图应该顶到最左边去才对，为什么没有过去？图片格式是svg，我在想是不是svg的原因？有无大佬讲解一下原理。

图片本身左边没有空隙，所以不是图片内容的问题。

Answer 1

有没有可能，这个背景图的左半部分就是有空白内容的？

---

Edit

如果背景图是 svg 格式的，得看 svg 图片是怎么设计的，在部分场景下下使用 background-size: 100% 100% 属是不会拉伸的，会继续保持原本的宽高比例。

具体可以阅读MDN上的这篇文章 👉 SVG 背景缩放 - CSS：层叠样式表 | MDN

解决方案是给 svg 图片增加 preserveAspectRatio="none" 属性。
或者在引入时这样处理 background-image: url('xxxx.svg#svgView(preserveAspectRatio(none))')

相关阅读

• svg背景图无法自适应-掘金
• html - how to add preserveAspectRatio to svg used as background-image - Stack Overflow
• 理解SVG viewport,viewBox,preserveAspectRatio缩放 « 张鑫旭-鑫空间-鑫生活
• viewBox - SVG：可缩放矢量图形 | MDN
• preserveAspectRatio - SVG：可缩放矢量图形 | MDN