问题标签 [background-attachment]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
css - CSS背景附件滚动/固定和背景大小封面
background-size:coverifbackground-attachment: scroll或background-attachment: fixedused为什么不同？
例子：
html - 背景附件：将图像流体固定到某个点
我的背景图像仅在某一点上是流动的。调整浏览器大小时，它开始缩小
你可以在这里看到我在说什么
css - Chrome issue with background-attachment fixed and position fixed elements
I've had this issue for a while and it seems to be a Chrome redraw bug that hasn't been fixed. So I'm looking for any stop-gap fixes.
The main issue is that when an element on the page has a background image that uses:
If another element is fixed and has a child video element it causes the element with the background image to disappear.
Now it works fine in Safari (and Firefox and IE) so it's not exactly a webkit issue. I've applied several properties that have been suggested to no avail.
Currently my solution is just to target the elements with a fixed bg image via a media query and just turn off the fixed background property.
Any ideas?
Update
Working Demo thanks to Daniel.
Update 2
Shoutout to somesayinice and FourKitchens blog post
html - 背景附件：固定 Internet Explorer 11 奇数上下抖动
注意到 IE11 中的一个奇怪且烦人的错误。使用固定背景附件的 css 放置在背景中的图像在滚动时会出现这种奇怪的上下抖动舞。它主要发生在使用滚轮或使用滚动条上的箭头按钮时。如果您通过拖动滚动条进行滚动，它似乎不会发生。
试试这个小提琴： http: //jsfiddle.net/G6Mdu/使用 IE 时，您可以看到图像抖动。在 chrome、firefox 等上运行良好。
任何解决方案？
css - CSS 修复了背景缩放/平移不适合 iPad
我已经彻底使用了搜索功能，但没有找到足够相关的答案来解决我的问题。
在我的新网站上，我正在实现一个固定的背景图像（大约 250x250 像素），设置为在用户向下滚动页面时跟随他们。从其他帖子和我自己的实验来看，CSS 属性“background-attachment:fixed”不适用于 iPad / iPhone 浏览器。
一位用户提出了一种解决方法，即创建一个看起来像这样的“背景包装”div：
这在一定程度上有效。这个解决方案的问题（对我来说）是，当用户在移动设备上进行捏合和缩放时，背景图像的缩放比例与前景内容的比例不同，从而产生草率、重叠的结果。
如果答案是显而易见的，请原谅我。我已经研究了几个小时（在这个网站和其他几个网站上），但无济于事。提前谢谢了。
jquery - iPad 上的固定位置背景
我有一个带有背景大小：封面和背景附件：固定的 div。这工作正常，除了在 iOS 上。
问题类似于这些问题： Using background-attachment:fixed in safari on the ipad Fixed Position Background on iOS
但不完全是。我找到的每个解决方案都是针对 body 标签上的固定背景。但我需要在动态页面中间的 div 中固定背景。因此，将假 div 设置为 position:fixed 对我不起作用。
是否有另一种方法可以使固定位置背景在 iOS 上工作？我需要 jQuery 吗？
css - 背景附件：修复了仅适用于 Retina 的 Chrome 中的错误
在使用 background-attachment:fixed 时，我发现 Chrome 如何仅在视网膜屏幕上呈现背景图像的问题。Firefox 和 Safari 按预期工作。我还注意到，当我单击“开发人员工具”>“控制台”>“渲染”中的“启用连续页面重绘”框时，我可以让它在 Chrome 中工作。但是，这也会在启用时导致严重的性能问题。当图像从背景附件：固定更改为背景附件：滚动时，图像渲染良好，但随后我失去了预期的效果。
关于解决此问题的任何建议？或者我是否必须在视网膜设备上定位 Chrome 并终止该功能？
这是一个带有屏幕截图的问题的链接：
css - 将固定背景与 CSS calc 对齐
我希望我尝试的不是不可能的。
让我先解释一下：我有一个响应式设计，在某些情况下需要固定背景（媒体查询块）。有问题的设计是这样的：
http://think-open.at/fileadmin/templates/responsive/content.html
基本上有两种媒体查询：一种用于最大高度，一种用于最小宽度。如果有足够的视口高度，则内容区域中有一个滚动条，并且设计高度是固定的。但是，如果视口不够大，无法显示预定义的高度，height-mediaquery 会从内部 div 中删除滚动条，因此不会有两个嵌套的滚动容器（body + div）并将内容区域设置为 height: auto。
如果视口太窄，还有一个响应式媒体查询，但这完美无缺。
现在的问题：当设计切换到整个页面滚动的模式（低于 830 像素高度）时，我想将图像定位在“固定”的右侧容器中，这样它就不会滚动出视口。但随之而来的问题是，我不能真正定位相对于容器 div 的背景，因为“固定”定位了相对于视口的背景图像。我在这里创建了一个 CSS fiddle：
http://dabblet.com/gist/ae5c3598e1465ce0c90e
如果您更改宽度，您会注意到问题。我想让图像的右边框与绿色框的右边框对齐。
这有可能吗？我使用 calc() 没有问题，因为如果检测到较旧的浏览器，我的 CMS 中将有一个条件使用普通的老式设计。
css - 背景附件：滚动和背景大小：封面不起作用
我有一个背景图像，我想将其固定在较大的屏幕上并在较小的设备上滚动。
这很好用...
但是我希望能够使用...
使用background-attachment:scroll似乎可以杀死background-size:cover并以全尺寸显示（我认为更大）。当我background-attachment: scroll;在第一组 CSS 中进行测试时，它会做同样的事情。
这个确切的东西似乎在这个网站上工作...... http://www.julytalk.com/我错过了什么？
html - 如何进行背景附加：固定到 div 而不是视口
我有一个大背景封面。
和 CSS
预期输出：背景图像，调整为350px x 100%（在我的例子中为 350x900），应该具有基于<div id="cover"></div>.
实际输出：背景图像，调整为视口（在我的情况下为 1440x900），具有基于<html></html>.
我想要的是 background-attachment:fixed 相对于 div 而不是视口。