iPad上的背景图像/位置呈现方式不同

我有一个div，它具有一个sprite背景图像的两个背景位置之一，具体取决于在php脚本中为div设置的类。iPad上的背景图像/位置呈现方式不同

下面的CSS可以在标准浏览器上正常工作，但在iPad上看起来并不一样。相反，我看到比我想要的更多的背景图像。正如你从下面的图片中看到的，而不是只看到一颗恒星，我也看到了另一颗恒星的一部分。

我如何才能在iPad上看到正确的背景位置/图像？

.normal, .favourite { 
    width:18px; 
    height:17px; 
    margin-right: 4px; 
    border:none; 
    cursor: pointer; 
    display:inline-block; 
    vertical-align: middle; 
    background-color:transparent; 
    background-repeat: no-repeat; 
} 

.normal { 
    background-image: url('/images/playlist_sprite.png'); 
    background-position: left bottom; 
} 

.favourite { 
    background-image:url('/images/playlist_sprite.png'); 
    background-position: right bottom; 
}

enter image description here

来源

2012-08-15 Nick

试试这个css属性'background-size：100％100％;'在'.normal，.favourite {}'并且让我知道。谢谢！ – 2012-08-15 10:25:13

这只是显示整个精灵图像，减少到适合18px乘17px – Nick 2012-08-15 12:05:51

而不是限定使用左/右/底部尝试限定它的确切使用的像素的背景的位置。

例如

background-position: XXpx XXpx;

此外，请确保您的精灵中的这些图像正好是18px乘17px，因为这是类说图像大小将是。

来源

2012-08-15 11:35:44

谢谢。我试过这样做，即background-position：0px 17px; for .normal和background-position：18px 17px;对于.favourite，然后根本没有背景图片（在iPad和普通浏览器上都显示），这很奇怪。如果我使用顶部，底部，左侧，右侧等，图像只显示。这可能是什么原因造成的？精灵图像都是18px乘17px。 – Nick 2012-08-15 11:59:07

你能提供一个链接到你的网页或创建一个小提琴吗？ – 2012-08-15 12:00:38

我会创建一个小提琴并回报，因为我的网站在登录后面 – Nick 2012-08-15 12:05:12

iPad上的背景图像/位置呈现方式不同

回答

相关问题