如何使用跨浏览器支持使背景SVG伸展100％？

Question

在Chrome中查看此笔，然后在Firefox中查看： http://codepen.io/richbrat/pen/fLdFw

在Chrome中，SVG正在适当扩展，但不适用于Firefox。为什么这样，它与SVG中的preserveAspectRatio有关吗？

SVG在这里： https://s3-us-west-2.amazonaws.com/s.cdpn.io/156826/bg.svg

Answer 1

查看CSS

background-size: 100% 100%;

查看浏览器兼容性：http://caniuse.com/#search=background-size

Answer 2

对于您要查找的效果，也可以使用线性背景：

background: #e8f5fa linear-gradient(to bottom right, transparent 51%, #DAEAF3 50%) ;

对于background-size，也可以这样写： background: #e8f5fa url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/156826/bg.svg') no-repeat 0 0 / 100% 100%;