问题标签 [background-attachment]

我的背景有一个非常奇怪的问题。当我在 css 中将背景附件更改为固定时，我的菜单中的字体会由于某种我无法弄清楚的原因而变小。当我将其更改为滚动或本地时，它会恢复到假定的大小。为什么会这样？

编辑

为 OP 提供一个示例：

我的问题仅在 Safari 中出现（Chrome 没问题）并且仅在某些机器上出现（可在 MacBook Pros 15" 上使用非视网膜显示器但不能在 iMac 和视网膜显示器机器上重现）。OSX：10.8.5、10.9.1 Safari版本：6.1.1、7.0.1。

不幸的是，我无法用 jsfiddle 重现这个问题，因为它不会出现在 iframe 中（但是 iframe 的内容会对它做出反应，这强烈暗示了浏览器错误恕我直言）。

这是示例 HTML，您可以在本地查看：

在检查器中选择 body 标记并切换background-attachment规则。您会看到字体略有变化（更细/更粗）。

我想知道这是一个多大的问题以及哪些机器受到了影响，以便问题最终可能会影响到一些可怜的 Apple 开发人员...... :)

更新

有趣的事实：-webkit-transform: translateZ(0);可以用作解决方法。为什么它起作用我不知道...

我有一个缩放背景图像以适合其容器，并且当 Modernizr 检测到浏览器不支持背景大小时，我有适当的后备（未显示）。

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

它在 Chrome、Firefox、Safari（桌面和 iOS）中看起来很漂亮，但是我在某些 Android 实例上遇到了问题。

这是正确显示的设备的 UA：

这是一个不支持的设备的 UA：

较新版本的 Android（模拟）将固定的背景图像缩放为全部爆炸和像素化以适应（我认为）视口，并且不注意其容器的大小或定义的background-size.

这一切都很好。事实上，这就是MDN 所说的将会发生的事情：

如果背景的附件是固定的，则背景定位区域是浏览器窗口的整个区域，不包括滚动条覆盖的区域（如果存在）。

我的问题是我不知道如何合理地检测何时会或不会出现这种情况，以便我可以相应地进行调整。由于页面上的布局和动画，我真的希望为所有支持它的浏览器修复背景，并且scroll如果我能弄清楚如何定位它，就可以解决这种极端情况。

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

正如标题所示，我使用的是 Stellar.js。我只有一个视差元素，而且非常简单。这是一个带有背景图像的部分。背景图像设置为固定（就像文档说要避免抖动），但图像仍然抖动 - 在 Chrome 中有些抖动，在其他浏览器中非常糟糕。当我删除固定的 CSS 时它也不会改变。

这是元素：

这是CSS：

很简单。有什么建议吗？

我正在开发一个科尔多瓦应用程序，并试图获得一个固定的背景。不幸的是，它似乎不起作用，并且每当我向下滚动背景时，它都会离开页面顶部。这是我用来执行此操作的 CSS（我已经尝试了其他几种方法）：

无论如何，当我向下滚动时，背景会从屏幕顶部滚动，就好像没有设置固定属性一样。

我认为这是 Chrome 的常见问题，但我找不到解决方法。

在这里查看我的代码（jsfiddle）

前两个背景图片已显示，但 #sec3 和 #sec4 的背景图片不会出现在 Mac OS 上的 Chrome 中。Firefox 和 Safari 运行良好...

当我将部分的高度更改为小一点时，将显示第三张图像...：

你知道是什么原因造成的吗？它也发生在 Windows 或 Linux 上吗？你知道解决这个问题还是我做错了什么？

谢谢，

尼克 =)

但是，我有一个带有 的 SVG <text fill='url(#img1)'>Hello</text>，在滚动时，我想通过在 div 上使用 设置其背景来获得与背景相同的视差效果background-attachment:fixed。

有什么方法可以使用 SVG 实现开箱即用？我知道Raphaël.js通过操纵元素patternTransform内的矩阵pattern来实现这一点，但是我想在不需要额外脚本的情况下实现这一点。

我需要通过 JavaScript 修改一些 CSS 属性。我需要使用的网站基于 CMS，我只能编辑正文元素以注入代码。

我想知道是否有办法使用 JavaScript 在页面加载时即时修改/覆盖 CSS？

目前我正在寻找修改两个属性（但将来可能会更多）：

我希望在我打算嵌入此脚本的特定页面上将它们更改为以下内容：

我试过这个，但它不起作用（记住我只能把它放在页面的正文中）：

有任何想法吗？谢谢。

我遇到了一个奇怪的 CSS 问题，这对我来说真是令人头疼。无论我应用什么 CSS，我的背景图像都不会随着页面上的内容滚动。这是我设置为正文 CSS 的内容：

但是背景图像总是固定在滚动上。页面网址：http ://sigur-ros.co.uk/tour

有任何想法吗？

非常感谢！

我目前正在做一个视差网站主题。背景图像需要固定为某些'div'和'section'附加，以避免jquery沉迷于所有内容。问题是任何动画项目下方的标签的背景图像在转换完成时都会消失，仅在 Google Chrome 上。补救？

There is a Google chrome bug with my code that there isn't in IE & Firefox.
The Address is : chashnik
The DIV class '.health' has a background image with fixed attachment property.
In Google chrome this images blinks repeatedly and never stopped.
There isn't any problem with Firefox & IE.
CSS Code: