CSS 背景图像在 Safari 上不同

Question

我有一个使用

background-image

CSS 属性显示的 SVG 背景。它在 Chrome/Firefox 上显示良好，但在 Safari 上呈现完全不同。

这是我的网站的实时链接，其中包含图像。它是背景中靠近顶部的紫色斑点。

这是它在 Chrome 上的呈现方式：

这是 Safari：

除了

background-image: url('/path/to/img.svg')

、

background-repeat: no-repeat;

和

background-position: left top;

之外，图像本身没有额外的 CSS 属性。

如何让图像在 Safari 上正确显示？

Answer 1

检查您是否为 SVG 背景使用兼容的 CSS 属性。不同的浏览器可能会以不同的方式解释背景大小、背景位置和背景重复等属性。

background-size: cover; /* Use consistent background-size values */