Question

我对网站的背景有一个非常奇怪的问题。我使用多个背景图片;那里有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

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

Answer 1

我在另一个使用不同SVG文件的网站上再次遇到此问题并遇到了同样的问题。它看起来像是iPad有多高的显示SVG的高度限制。这真的没有意义，我真的不认为实际上是这种情况，但这是我唯一能想到的，因为在这两种情况下，缩短图像会立即修复它。

SVG背景图片没有出现在iPad上

1 个答案: