html - iPad 的 Safari 在将 jpg 渲染为背景图像时有问题吗？

Question

这是我的代码:

HTML

<div class="sfondo-interne-8601">
    <div style="height:1200px; width:900px;">
        Test
    </div>
</div>

CSS

.sfondo-interne-8601
{
    background-image:url('http://www.deviantart.com/download/247331565/moonlit_tears_by_lifesequencebreak-d439699.png') !important;   
    background-repeat:no-repeat;
    background-position:center top;
} 

好吧，尝试创建一个页面并在 iPad 上对其进行测试:它运行良好(图像为 png)。

现在，尝试用 jpg 更改图像(我已经为您选择了一个 here )。您会注意到新图像将调整大小(不确定是什么规则)并居中在整个 html 文档的中心/顶部。

为什么？我该如何解决？ ipad有限制吗？

只是注意到，如果我使用的 .jpg 速度低于 1150 像素(作为高度)，它也能正常工作。 Safari 的错误？

Answer 1

在 iOS 上，jpeg images of over 2MP get subsampled (查看“资源限制”)，有效地改变图像的尺寸。

我推测当 CSS background-size 设置为 contain 或 cover 时，这不会表现得如此明显(它仍然会发生，但由于宽高比不会受到影响，背景大小调整算法仍会运行)

如果您希望二次采样的背景图像保持其原始尺寸呈现，您可以添加background-size: 1920px 1200px: before和 after .