为什么 background-repeat: no-repeat 不适用于 Opera 12 中的 .svg 图像？答案

【问题标题】：Why background-repeat: no-repeat doesn't work with .svg images in Opera 12?为什么 background-repeat: no-repeat 不适用于 Opera 12 中的 .svg 图像？
【发布时间】：2013-12-28 20:42:31
【问题描述】：

我在 Opera 12 中遇到了一个奇怪的问题：我有一个 .svg 图像，它链接在我的 css 代码中。当我调整大小以缩小显示图像的页面时，Opera 会重复图像，就好像我没有在背景重复中使用“不重复”值一样。我错过了什么？

这是我的css代码：

.svgImg {
    background: url("../img/img.svg") no-repeat;
    height:100%;
    width:100%;
}

我也试过这个：

.svgImg {
     background: url("../img/img.svg");
     background-repeat:no-repeat;
     height:100%;
     width:100%;
 }

但它没有用。 Opera 为什么要这么做？

【问题讨论】：

尝试删除 SVG 中的 width 和 height 属性。 See answer here.
何必支持 Opera？
我已尝试删除宽度和高度，但仍然无法正常工作。还有其他建议吗？
它在 Opera 15 或更高版本中有效吗？如果是这样，那可能是 presto 的问题，Opera 在 15 及更高版本中放弃了铬布局引擎。
另外，您是否确认问题仅与 SVG 图像有关？当您将背景图像更改为 png 或 jpeg 时，您是否得到了预期的行为？

标签： css svg opera background-repeat

【解决方案1】：

试试：

background-repeat:no-repeat!important;

在 Firefox v.88 上为我工作

【讨论】：

【解决方案2】：

.svgImg {
background: url("../img/img.svg") no-repeat;
height:100%;
width:100%;
}

【讨论】：

请在您的答案中添加一些解释。这将有助于其他人理解你的推理。