Question

我有一个CSS类，我在其中添加了这样的背景图像：

.my-class{
   background-image: url(images/my-bg.png);
}

这适用于浏览器并且在浏览器中正常工作，但是当我在iPad中看到它时，背景图像不可见。

可能是什么原因？

Answer 1

如果没有进一步的信息（即你如何应用这个类，以及哪个元素），我无能为力。我可以告诉你，这个代码段在桌面，iPhone和iPad上运行得很好：

<!DOCTYPE>
<html>
    <head>
    <style type="text/css">
        .my-class{background-image: url(images/my-bg.png);}
    </style>
    </head>
    <body class="my-class">
        <p>Some content</p>
    </body>
</html>

Answer 2

我遇到了同样的问题，并设法使用jQuery获得了一个有效的解决方案

    $(document).ready(function () {

        var buttonsFilename = '<%=ResolveUrl("~/Content/Images/Buttons.png") %>';

        $('.commands .command').css({
            background: 'url(' + buttonsFilename + ')',
            width: '55px',
            height: '55px',
            display: 'inline-block'
        });
    });

我在ASP.NET MVC网站中使用它，因此<% %>标记。

我只能使用后台快捷方式css属性来使用它。我无法让以下任何一个工作......

背景图像
将backgroundImage
'背景图像'

...使用对象表示法时。不幸的是，这会消除您可能拥有的任何其他背景设置。但我通过使用另一段jQuery设置我的background-position属性来解决这个问题。

Answer 3

我有这个问题，最后经过几个小时的苹果抨击和辛苦工作后，我在整个网站上制作了一个带有ID的div标签。 iPad喜欢它：）

问题解决了。

CSS

<style type="text/css">

        #bodybackground {
        background:#999 url('http://mywebsite.com/images/background.jpg')
    }

</style>

HTML

<div id="bodybackground">
entire site here
</div>

Answer 4

将此元标记添加到您的网页

<meta name = "viewport" content = "width = device-width, height = device-height"/>

Answer 5

我发现我遇到了同样的问题，（即：没有专门在iPad上显示的背景图片），问题是在需要撇号时使用引号或缺少引号......

问题（没有撇号）

.my-class{background-image: url(images/my-bg.png);}

修复（添加了撇号）

.my-class{background-image: url('images/my-bg.png');}

Answer 6

如果您要从photoshop保存.png，请务必通过“为网络和设备保存”进行保存，然后选择PNG24。

CSS中指定的背景图像不会出现在iPad中

6 个答案: