CSS背景图片在iPad上无法显示

Question

CSS背景图片在iPad上无法显示

6

我完全困惑了，不知道是否有什么简单的东西让我错过了，但是我无法在iPad或iPad模拟器中显示背景图像。

作为测试，我创建了以下简单页面：

<html>
<head></head>
<body>
    <img src="content_box_black_background.png" />
    <div style="height: 100px; width: 500px; background:url(content_box_black_background.png);">
    </div>
</body></html>

作为一个测试，我也直接在div块上方输出图片。在Chrome中它们都出现了，但在iPad模拟器中没有出现。有什么想法吗？

- Benjamin Dell

如果它们都出现在Chrome中，但在模拟器中都没有出现，那么我不认为你尝试将其用作“背景”图像与你的问题有任何关系。听起来像是模拟器没有捕捉到图像的路径。 - ScottS

看起来没问题。不过我建议尝试一些其他的方法，也许模拟器有点问题：url('content_box_black_background.png'); 或者 url('./content_box_black_background.png'); - R. Hill

iPad模拟器是什么？你能提供一个链接吗？ - Zabba

6个回答

3

IPAD不支持在background缩写中使用cover。如果您要使用cover，请另起一行。

   -webkit-background-size: cover; 
   -moz-background-size: cover; 
   -o-background-size: cover; 
     background-size: cover;

- Rick

0

在一些移动主题设置中，您会发现“缩小帖子或页面中的大图像以适应较小的屏幕。” 检查是否启用/禁用它。然后禁用它。

希望这能解决您的问题。

- Naresh

0

请确保您有有效的CSS！http://jigsaw.w3.org/css-validator/

我以前遇到过这个问题，并通过验证/修复我的CSS来解决它！

- Alan David Garcia

0

我还没有测试过这些，但我有几个想法你可以测试：

1）iPad的“本地驱动器”上的文件是如何放置的？你没有使用HTTP，所以我假设你把图片放在了“硬盘”(RAM)上 - 尝试直接在浏览器中打开文件，它是否显示/下载？

2）尝试添加：“display:block;”到你的CSS渲染中。可能会起作用。

3）IMG标签，尝试添加宽度和高度，是否会改变任何内容？

4）你使用的PNG文件是什么类型？8位还是24位？

5）如果使用GIF或JPG呢？

6）在使用背景图片时，请尝试使用属性的长格式。“background-image:url(image.jpg);”。

7）还可以尝试添加一个<!DOCTYPE html>，以便浏览器进入HTML5模式。

- BerggreenDK

1

感谢您的建议。通常需要一系列简单的检查来帮助解决问题。我还无法尝试每个建议，但我相信其中一个建议会有用（最可能是我在特定图形上使用的PNG格式）。感谢您的意见。 - Benjamin Dell

1

RAM是系统内存，而硬盘是用于文件存储的 - 它们在不同的层面上完全没有关联。 - Christian

@Christian - 我将“硬盘驱动器”作为“相似性”发布。我知道Flash RAM、RAM、硬盘驱动器等之间的区别。不需要因为我将内部存储与硬盘驱动器进行比较而对我的答案投反对票。这是大多数人从普通计算机中所熟悉的。我在1987年得到了我的第一台电脑，所以请理解这只是为了比较和解释而提出的相似性。 - BerggreenDK

-3

始终在您的 URL 周围加上引号，url("http://example.com/folder/file.htm") 或至少斜杠 url("/file.htm")

- isildur4

如果没有空格，则不需要引号。 - BerggreenDK

1

如果没有空格，引号是完全不必要的，同样适用于完整的URL指定，你为什么要那样做呢？CSS相对于它自己的路径读取URL。例如，如果您的*.css*位于<site root>/styles内，而图像位于<site root>/styles/images内，则在CSS中使用的URL类似于url(images/<image>.extension)，它将完美地工作！ - tomsseisums

1

或者你可以不要当个网上恶意评论者。 - isildur4

1

@isildur4：不，我不会称之为“好习惯”，因为你可能会忘记其中一个引号并且导致更多的麻烦。简洁明了才是王道。 - BerggreenDK

我看到你在捣乱我很讨厌你滚开，新手，别在我的帖子里瞎搅和 - isildur4

显示剩余2条评论

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- timbonicus · Accepted Answer

这可能与图片的尺寸有关。 Safari Web 内容指南指出， GIF、PNG 和 TIFF 图像的最大尺寸为 3 百万像素（3 * 1024 * 1024）。我曾遇到类似问题，基于 CSS 精灵的菜单无法在 iPad 上显示。在任何精灵显示之前，我必须将相当大的图像（3000x1500）缩小。