问题标签 [background-attachment]

我有一个background-attachment: fixed应用到它的节点。固定背景“中断”如果它跟随一个-webkit-transform应用了它的节点，我正在寻找一个黑客来修复它，如果有人知道一个（例如，有多个 webkit css3 错误可以用奇怪的东西修复，比如应用-webkit-perspective等）。

请注意，这并不像移动节点那么简单。在我的实时代码中，无论节点的顺序如何，它都会中断（尽管我意识到它不在 jsfiddle 中）

我已经报告了这个错误，但是一个类似的（for position: fixed）已经开放了一年多了

示例（http://jsfiddle.net/m3scX/2/）：

CSS：

由于 background-attachment:fixed 在某些移动浏览器上不起作用（例如在 iOS 上），有什么替代方案，特别是在尝试实现以下演示时：http ://cppforums.ludost.net/test/test.html

CSS：

HTML：

关于如何以适用于所有浏览器的方式实现演示的任何建议？最好是仅 CSS 的解决方案。

我有一个问题。我目前正在开发一个网站，但决定不真正关注 IE，因为它是一个单页网站，而且我们有选定的受众，所以我们决定 IE 不是主要优先事项。

现在我在 ie 11 中做一些测试只是为了好玩，一切似乎都很好。我对固定背景只有 1 个问题。

每当我尝试滚动时，它都会抖动，而不是停留在原位。（所以它是固定的，但滚动时它仍然上下晃动几个像素）

我在顶部还有一个菜单，它在单击菜单项时使用 scrolltop 滚动到右侧的 div，当您使用它时，背景图像不会晃动并且表现得像它应该的那样。

对于任何拥有 Windows 8 和 IE 11 的人，这是链接：http ://www.randomshirts.nl/letterfabriek9/

更新：当我在我的普通计算机 ie11 上测试它时，它工作正常。这似乎是触摸屏笔记本电脑的问题

我希望我的所有容器都是全屏大小，并且背景完全填充它而无需重复或滚动。所以我当然使用“背景尺寸：封面；” 和“背景附件：固定；” 这在 Firefox 和 Chrome 中运行良好。对于 IE 8，我使用 JavaScript 插件。

当我在 IE 11 中打开我的页面时，只要我不缩放，它似乎就可以正常工作。如果我在 IE 中缩小，背景也会变小。如果没有“背景附件：固定”，这不会发生。只有在这种组合中，它才会放大我真的不想要的背景。

我究竟做错了什么？太感谢了。

这是我的完整代码：

http://apolytos.com/new/img/test.html

Internet Explorer 11 不包括在内；查看提供的链接。如果我删除 :fixed，它会按预期覆盖，但是 bg 会滚动页面上不需要的内容。IE中的这两行代码似乎有冲突。

I have a list of figures containing background images. Something like the following:

Each of these images has their background-size set to cover and background-attachment set to fixed.

When each of the figures takes up the entire viewport, this works fine, but if there is an offset of any kind the background-image gets clipped.

As far as I can tell this is by design (https://developer.mozilla.org/en-US/docs/Web/CSS/background-size#Values).

I would like the images to either clip vertically or horizontally but not both, and be centred by the size of the figure itself.

I know there are javascript solutions but is there a way to do this using CSS?

Here is a working example: http://codepen.io/Godwin/pen/KepiJ

这是以前曾提出过的问题，但很少大张旗鼓/对如何修复它或任何解决方法知之甚少。另外，距今已有 2 年了，我认为现在是重新调查的好时机：

堆栈溢出问题： 如何防止背景附件：已修复；从滞后我的网站？

Stack Overflow 问题 2： 我的固定背景使网站滚动非常慢，我可以做些什么来改善它？

在这里讨论： https ://code.google.com/p/chromium/issues/detail?id=90637

如您所见，我在background-attachment:fixed本网站的 3 个不同部分使用：

http://agoodman.com.au/updated/

使用 Chrome 的时间线控制台，似乎每次向下滚动页面都会重新绘制整个页面。这可能非常滞后，尤其是在较旧的计算机上。我正在使用 rMBP，它对我来说也很滞后。

问题是：（a）是否有任何可用的解决方法，以及（b）是否有任何 javascript 替代品background-attachment:fixed可以提供更好的性能？

我一直试图弄清楚一些事情，但没有运气。我也一直在互联网上寻找可能的解决方案，但同样没有运气。

假设我想要一个带有文本的图像在用户查看网站时向下滚动时保持固定在背景中，我该怎么做呢？（也反应灵敏）。

我已经尝试过很多事情，但是当我希望它留在背景图像中时，当调整窗口大小时，文本会超出背景中的图像。

我想做的一个huuuuuuuge示例是这样的：

http://www.nois3.it/

固定在顶部的图像，其中包含文本，并且在调整大小时不会溢出图像。

如果有人能帮我解决这个该死的事情，那就太棒了！

感谢您的时间！

我有background-attachment: fixed;我的英雄部分，它适用于 Firefox 和 safari，但不适用于 chrome。我可以通过更改来让它工作，position:relative;但是z-index: -1;随后英雄中的按钮变得无法使用，这也会在 Firefox 和 safari 中产生问题。

我尝试根据我发现的其他帖子将父位置更改为静态，但这也不起作用。

http://bayarddev.com/fca/about-us/

如何将固定背景附件与 css3 翻译动画一起使用，而不是更改“左”属性动画？
我想在这里使用固定的背景附件

http://jsfiddle.net/alyumitskij/9tsBc/3/
喜欢这里

http://jsfiddle.net/alyumitskij/6X7mr/1/