Question

在最后一次谷歌浏览器更新（52.0.2743.116 - ＆gt; 53.0.2785.89/53.0.2785.101）后，我的WebApp上的图标不再可见。

我正在使用SVG spritesheet作为背景图像，并在我的CSS中选择背景位置所需的图标。

我发现，如果给出背景颜色，图标是可见的，这是不透明的。对于具有透明背景的图标，我使用值rgba（255,255,255,0.01）。

我的HTML：

<h3>background-image with background-position</h3>

<span class="icon icon-1"></span>
<span class="icon icon-2"></span>
<span class="icon icon-3"></span>

</body>
</html>

我的CSS：

.icon {
    display: inline-block;
    background-image:url("%FilePATH%/icons_spritesheet.svg");
    background-size: 2350px 2340px;
    width: 50px;
    height: 50px;
    border-radius: 2px
}

.icon-1 {
    background-position: -285px -645px;
}

.icon-2 {
  background-position: -715px -505px;
}

.icon-3 {
  background-position: -285px -785px;
}

为什么这样开心？其他/更好的解决方案是受欢迎的。

Answer 1

解决方案（对我有用）：

问题是我的SVG。我使用了另一个文件而没有这个问题。

然而......这个问题出现在最新的Chrome版本上，也许其他人也有同样的问题。对于我的SVG，它可以删除border-radius。如果给出border-radius，则图标不再可见。

Chrome浏览器更新后，图标不可见

1 个答案: