3

我在网站的背景上遇到了一个非常奇怪的问题。我正在使用多个背景图片；有 4 张照片，然后是一个倾斜形状的 SVG，它越过图像并将它们框起来。这是身体背景的 CSS

body {
    background-color: #bbe2de;
    background-image: url('/img/mobile-bg-exorcised.svg');
    background-position: top center;
    background-repeat: no-repeat;

    color: #2a2a2a;

    font-family: "ff-din-web";
    font-size: 16px;
    line-height: 1.4em;
}
@media screen and (min-width: 600px) {
    body {
        background: 
            url('/img/desktop-bg.svg') top left,
            url('/img/bg-photo-4.jpg') 849px 4460px,
            url('/img/bg-photo-3.jpg') 0 3948px,
            url('/img/bg-photo-2.jpg') 617px 980px,
            url('/img/bg-photo-1.jpg') 0 186px;
        background-repeat: no-repeat;
    }
}

它在所有桌面浏览器上都能正常显示，但在 iPad 上，SVG 根本不显示。其余图像显示正常。我在网站的其他地方使用 SVG 作为背景图像，它们显示得很好，所以我认为这不是 MIME 类型之类的服务器问题。

这是该网站的链接，现场直播：http: //johnkatimaris.thesmackpack.com/

这是有问题的 SVG 文件，以防您认为它可能有问题：http ://d.pr/f/2vp4

关于为什么它不起作用的任何想法？

4

1 回答 1

1

我在具有不同 SVG 文件的不同站点上再次遇到了这个问题，并且遇到了同样的问题。似乎 iPad 显示 SVG 的高度存在某种未记录的限制。这真的没有意义，我真的不认为实际上是这种情况，但这是我唯一能想到的，因为缩短图像在这两种情况下都会立即修复它。

于 2013-11-25T15:51:10.893 回答