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

发布于 2024-11-16 15:39:28 字数 187 浏览 2 评论 0原文

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

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

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

可能是什么原因？

原文

I have a CSS class where I added a background image like this:

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

this applies fine and works properly in browsers, but when I see it in the iPad, the background image is not visible.

What could be the reason?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

岁吢 2024-11-23 15:39:28

如果没有更多信息（即您如何应用此类以及应用到哪个元素），我无法提供进一步的帮助。不过，我可以告诉你，这段代码在桌面、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>

Without further information (i.e. how you're applying this class, and to which element), I can't help further. I can tell you however, that this snippet works just fine on desktop, iPhone and 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>

回复收藏 0 原文

可是我不能没有你 2024-11-23 15:39:28

我遇到了同样的问题，并设法使用 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 属性来解决这个问题。

I've had the same problem and have managed to get a working solution using jQuery

    $(document).ready(function () {

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

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

I'm using this within an ASP.NET MVC website, hence the <% %> tag.

I could only get it to work using the background shortcut css property. I couldn't get any of the following to work ...

background-image
backgroundImage
'background-image'

... when using the object notation. Unfortunately that wipes out any other background settings you may have. But I got around that by using another piece of jQuery to set my background-position property.

回复收藏 0 原文

梦行七里 2024-11-23 15:39:28

我遇到了这个问题，最后经过几个小时的苹果攻击和辛苦工作，我在整个网站周围制作了一个带有 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>

I had this issue and finally after hours of apple bashing and toiling I made a div tag with an ID around my entire site. The iPad loves it :)

Problem solved.

CSS

<style type="text/css">

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

</style>

HTML

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

回复收藏 0 原文

走野 2024-11-23 15:39:28

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

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

Add this meta tag to your page

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

回复收藏 0 原文

那些过往 2024-11-23 15:39:28

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

问题（无撇号）

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

修复（已添加撇号）

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

I found that I was having the same problem, (ie: no background image shown on iPad specifically), the problem was the use of quotes, or lack thereof, when apostrophes were needed...

Problem (no apostrophes)

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

Fix (apostrophes added)

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

回复收藏 0 原文

爱她像谁 2024-11-23 15:39:28

如果您要从 Photoshop 保存 .png，请确保通过“保存为网络和设备”保存并选择 PNG24。

回复收藏 0 原文

~没有更多了~

关于作者

想念有你

暂无简介

0 文章

0 评论

22 人气

关注发私信

友情链接

文江博客

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（6）

关于作者

相关话题

热门标签

推荐作者

胡图图

zt006

z祗昰~

冰葑

野の

天空

友情链接

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（6）

关于作者

相关话题

热门标签

推荐作者

胡图图

zt006

z祗昰~

冰葑

野の

天空

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。