Question

我正在使用svg图像作为背景。我正在尝试使用CSS3的background-size: 100% 100%;，但它似乎不起作用，即使在应该支持它的浏览器中（如Chrome）。

如果您查看this site，您会看到#special-post article（食物图片右侧/下方），背景为红色横幅。请注意，当您向下缩小窗口时，背景图像的高度会下降以保留其比例，而不是按照我的意愿拉伸。

编辑：我在FireFox上检查了它，它运行正常......所以这似乎是一个webkit问题。

编辑：我在Safari上检查了它，它的确有效！所以看起来我的问题是针对Chrome的。

（PS：我熟悉this替代解决方案，使用img标记，但我宁愿不使用它。）

Answer 1

这是一种解决方法：

打开您的.svg文件，在开头找到<svg>标记，并在其中添加以下属性：

preserveAspectRatio="none"

Answer 2

background-size: cover

全面运作。测试w / Safari，Chrome和＆amp; FF。

Answer 3

事实证明，这是Chrome中已知的特定于svg背景图片的错误。我正在运行v 17.0.963.56，万一有人关心，你可以跟踪错误here。

Answer 4

这仍然是Chrome 39中的一个问题，但在Firefox中则不然。我在缩放背景SVG时碰到了它：

background-image: url(bg.svg);
background-repeat: repeat-x;
background-size: 1200px auto;

即使在SVG中具有精确的像素水平尺寸，我也有一个小差距。当我没有扩展它时它起作用了：

background-size: auto auto;

没有太大的解决方案无法扩展您的背景，但仍然。