background-attachment：固定干扰背景大小 [英] background-attachment: fixed interfering with background-size

问题描述

我有一个缩放到适合容器内的背景图片，当Modernizr检测到浏览器不支持背景尺寸时，我有适当的回退（未显示）。

I've got a background image scaled to fit inside its container, and I have appropriate fallbacks (not shown) for when Modernizr detects that the browser does not support background-size.

.wrap {
    width: 200px;
    height: 116px;
    position: absolute;
    background-image: url(image.jpg);
    background-attachment: fixed;
    background-position: 0 0;
    background-size: 200px 116px;
    background-repeat: no-repeat;
}

这里有一个例子：http://jsfiddle.net/crowjonah/6xYNm/

它在Chrome，Firefox，Safari（桌面和iOS）。

It looks beautiful in Chrome, Firefox, Safari (desktop and iOS), however I'm having trouble on some instances of Android.

以下是正确显示的设备的UA：

Here's a UA for a device that displays correctly:

Mozilla/5.0 (Linux; U; Android 4.0.4; en-us; Xoom Build/IMM76L) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Safari/534.30

，这里是设备的UA：

Mozilla/5.0 (Linux; U; Android 4.2.2; en-us; sdk Build/JB_MR1.1) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30

较新版本的Android（模拟）所有被吹出和像素化，以适应（我认为）视口，并不注意其容器或定义的 background-size 的大小。

The newer version of Android (emulated) scales the fixed background image to be all blown out and pixellated in order to fit (I think) the viewport, and does not heed the size of its container or the defined background-size.

这很好。事实上，这就是 MDN说会发生的原因：

And that's all fine. In fact, that's what MDN says will happen:

如果背景的附件是固定的，背景定位区域是浏览器窗口的整个区域，不包括滚动条所覆盖的区域。 / p>

If the background's attachment is fixed, the background positioning area is instead the entire area of the browser window, not including the area covered by scrollbars if they are present.

我的问题是，我不知道如何合理检测是否会出现这种情况，以便我可以调整因此。因为页面上的布局和动画，我真的希望所有支持它的浏览器的背景是固定的，并且可以在这个异常情况下解决 scroll 如果

My problem is that I don't know how to reasonably detect when that will or won't be the case so that I can adjust accordingly. Because of the layout and animations on the page, I really do want the background to be fixed for all browsers that support it well, and can settle for scroll in this outlying case if I can figure out how to target it.

更新（10/3/2013）：
为了防止混淆，我更新了小提琴来演示一个更现实和有问题的示例，证明更多我定义的CSS属性： http：// jsfiddle .net / crowjonah / QtpVN /

推荐答案

您尝试过

background-image：url（image.jpg）;
background-size：100％;

background-image:url(image.jpg); background-size: 100%;

带走位置：absolute;
background-attachment：fixed;

take away position: absolute; background-attachment: fixed;

这篇关于background-attachment：固定干扰背景大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！