问题标签 [background-attachment]

我想在固定的背景上做流动的内容。它在桌面上完美运行。在 iOS 上也可以，但并不完美。主要问题出在安卓手机上。它不涵盖内容。如果你想编辑它，这里是CodePen链接。

大家好，我的代码有问题，只有当我删除 Firefox 和 IE 中的 transform: rotate() 而在 Chrome 中运行良好时，背景附件才能正常工作。

这是我的 HTML

这是我的CSS

因此，为了清楚，当我删除 translate 属性时，我添加它时它只能在 chrome 中工作。

我正在学习如何建立一个网站，但由于背景问题，我遇到了一些麻烦。

当我将内容添加到 div 容器时，背景会重复。为什么会这样，我该如何解决？

这个问题已在 SO 和其他地方多次报告，但我找不到任何有效的解决方案。

如果你有一个固定位置的 div 和一个固定的附加背景，在某些特定条件下，Google Chrome 上的渲染是错误的（在 Firefox 和 IE11 上测试没有问题）。

我制作了下面的codepen来说明问题： https ://codepen.io/EricRondo/pen/PaENpe

如您所见，仅在 Chrome 上，背景并没有覆盖所有 div，应该是 400px 高度。

效果取决于“顶部”位置。这里当 top 增加 50px 时会发生什么： https ://codepen.io/EricRondo/pen/WydwMW

我添加了另一个具有定义高度的 div，因为没有滚动实际上根本没有问题。很奇怪 ！

我遇到了许多解决方案，例如：

但是，虽然它在“某些”情况下确实有效，包括上面的代码笔，但在我的情况下却不起作用，这涉及更多的容器和 JS 代码。但问题的根源本质上是相同的：仅当固定定位的 div 具有 background-attachment:fixed 时才会发生。

有问题的完整网站在这里： http ://reims.dev-indelebil.com/

Firefox 没问题：干净流畅的视差效果，但 Chrome 会发生这种奇怪的行为。当在容器上添加 translateZ(0) 或任何其他“GPU 技巧”时，它会变得非常迟钝/生涩，与例外行为相去甚远。

提前感谢您提供任何建议或解决方案！

如果我的问题很愚蠢，我很抱歉，但我不明白“关于视口的图片是固定的”是什么意思，以及它如何与以下内容相关联：

假设我们有一个 html 元素<div class="background"></div>和一些样式

在这种情况下，背景图像不会出现。我不明白为什么以及如何与视口的想法相关。

我知道这是一个已经多次回答的话题，但我正在使用 css “background-attachment:fixed” 属性，我想让它在移动设备上工作。

答案是：这是不可能的，因为出于性能原因它被迫“滚动”。知道了这一点，我仍然尝试，并在 w3schools 上找到了这些示例：示例 1，示例 2。

这两个示例都适用于我的 chrome 移动浏览器（在 Android 7.0 上运行）。无论我多么努力，我都无法重现这种行为。

我检查了代码，它似乎完全基于后台附件工作。

这怎么可能，我该如何重现呢？

我有一个与徽标颜色相同的网站的全宽部分。所以我使用了 background-attatchment: fixed 以在整个网站上存在的常规徽标的顶部保留第二个“人造”（仅用于设计）徽标。

这在我需要的所有浏览器上都可以正常工作。然而，前几天我跳上了一个旧的 MBP，Chrome 已经有一段时间没有更新了，并注意到徽标完全偏离了 20 像素。

我在代码笔中重新创建了它，认为这可能是我的布局的一些填充/边距问题，但即使在超级剥离版本中，问题仍然存在。

最新的 chrome： 正确对齐的徽标 chrome v50： 由旧版本的 chrome 引起的问题

https://codepen.io/jaketh9000/pen/wEYWpB

我的第一直觉是，这将是我让背景位置向右对齐的一种有点奇怪的方式。但即使我只使用直接的 px 值，同样的问题仍然存在。

任何想法将不胜感激。

干杯。

我正在尝试实现视差效果，它在我的较小显示器上运行良好，但是当我将选项卡拖到较大的主显示器上看到它时，它立即不起作用。图像不会保持固定，而是与站点的其余部分一起滚动。当我把它拖回来时，它又开始工作了。我很困惑，这是 chrome 的同一个实例，所以为什么会发生这种情况。有没有办法来解决这个问题？我已经在 Edge 中尝试过了，它在那里工作得很好。

另外，我正在使用 Angular 6。

我正在尝试制作一个简单的背景图像，当我向下滚动页面时它会保持原位。背景图像不会留在原地。我已将背景附件设置为固定。

见：www.emergencydatascience.org

我的 CSS 代码：

如果有帮助，请提供更多 CSS： https ://github.com/dighr/data-flood/blob/gh-pages/_sass/layout/_wrapper.scss

抱歉，这个愚蠢的问题已经被问了很多，但是我阅读和测试过的解决方案都没有对我有用......

我正在尝试用旋转木马背景创建那种视差效果：https ://www.w3schools.com/howto/tryhow_css_parallax_demo.htm 这是给我父亲的网站的，我想给他这个周末的礼物（HB爸爸！）

这是我的代码：

我用这个模板开始了我的项目（如果它有帮助的话），只是希望页面内容与标题重叠：https ://blackrockdigital.github.io/startbootstrap-half-slider/

问题：图像在 ~0.5scd 之后被调整为视口大小

经过测试的解决方案：使用位置而不是背景位置，调整我的图像大小（1900 * 1080），背景尺寸：自动 100%，其他一些我忘记了（对不起！）

一个奇怪的行为：（对我来说很奇怪，因为我是菜鸟）第一张图片以完美的比例加载

谁能给我一条建议？我已经阅读/观看了不同的教程，但对我没有任何帮助，我还阅读了 W3School 文档，但它并没有真正帮助我......

对不起我糟糕的英语！