问题标签 [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 - 在 body 元素中将图像附加到页面顶部，img 没有滚动
我有以下问题。我认为，有一种快速的方法可以做到这一点，但现在我找不到解决它的方法。
所以，我有一个图像，我希望它只作为元素页面顶部的背景图像。<body>目前，如果我向下滚动，它正在移动到页面底部。
我有以下代码：
css - 背景附件：修复无法在 Safari 上运行的问题
我在一个跨越 100% 浏览器的元素上运行了以下代码：
我需要做的是让图像跨越浏览器的整个宽度，同时保持固定（从而允许内容在其上滚动）。
它似乎适用于除 Safari 之外的所有浏览器 - 我缺少什么想法吗？
我尝试将元素高度和最小高度设置为100%，但没有任何乐趣。
可以在此处查看演示页面的链接：http: //oscarsarc.tinygiantstudios.co.za/adopt/adopt-nationwide/
css - 设置背景附件：固定并仍然使用背景位置
我正在尝试将背景封面图像放置在图像的左下方（background-position: 0% 100%;），同时固定位置，使图像不会滚动。
问题是，在使用background-position时被忽略background-attachment:fixed。
一些示例 HTML：
以及相关的 CSS：
如果我将其删除background-attachment或更改为滚动，它将正确定位图像。我需要什么才能使图像保持在固定位置，但该位置位于图像的左下角？
我尝试通过<img>标签添加图像，但也无法正常工作。
如果您想使用代码，我已将其添加到 JS Fiddle 上：http: //jsfiddle.net/bradonomics/xtjmyv7y/2/
如果您取出 CSS 第 5 行background-attachment属性，您可以看到地板上的地毯。
android - 背景附件：固定不工作 - Android Chrome (v40)
背景
（这已经被问 过很多次了，我知道。但是，它似乎每次都是由不同的事情引起的。我经历了大约四个不同的 StackOverflow 回答线程并尝试了一切。似乎没有任何工作了，所以我相信这是一个新问题。）
无论如何，我有一个 HMTL 元素，其背景图像需要修复，使用background-attachment:fixed;
- 所有桌面浏览器 - 作品
- 移动 Firefox - 作品
- 默认安卓/三星浏览器 - 作品
- 移动 Chrome - 不工作
我把这个问题转变成一个更简单的可复制测试，它是一个单一section元素，设置为200%页面高度，背景是全屏和固定的。
代码
用于测试的 JSFiddle
为了比代码片段更容易在智能手机上进行测试：http: //jsfiddle.net/LerLz1L2/
我尝试过的事情
backface-visibility: hidden;-webkit-backface-visibility:inherit;-webkit-transform: translate3d(0,0,0);- 将元素和所有父母设置为
position:static
html - HTML/CSS 多个固定背景，无需 Chrome 重绘
对于这样的布局： http: //codepen.io/anon/pen/dPwQod
HTML：
CSS：
Chrome 会在滚动时重新绘制整个视口，使滚动非常缓慢，尤其是在视网膜显示器上。您可以通过在检查器中勾选“显示绘制矩形”来查看它。
我一直在寻找将背景强制为单个图层的方法，但没有找到适合这种布局的方法。有些人建议 translateZ(0) 并将背景放在它自己的固定 div 中，但这只有在有一个固定背景时才有效。有什么方法可以强制 chrome 在具有多个背景的滚动条上不重新绘制整个内容，例如这种布局？或者至少有一种方法可以在没有 Chrome 延迟的情况下使这种布局成为可能？
干杯。
html - 这些背景图像如何保持固定不变？
我不太确定如何称呼这个问题，所以希望这个标题是正确的。
我将为一个新客户在这个网站上工作，他们说他们想要类似于这个网站正在做的事情（http://www.buzzardfilm.com）。
如果向下滚动，您会在索引页面上看到它有这种“平滑动画”并且新块开始滑入背景图像？
这就是我所说的： http: //gyazo.com/8cafbab233930bd478723b48c5912263
我的问题是，这通常是如何实现的？这只是顶部带有一些文字的图像还是背景图像？我需要什么样的规则才能得到这个？
css - 背景附件已修复——谷歌浏览器
目前在 Firefox 和 Safari 上，background-attachment: fixed属性正在工作，但在 Chrome 上没有响应。
这是适用于 FF 和 Safari 的页面 http://prestonmcpeak.com/work/enigma.html
这是我正在寻找的在所有三个浏览器中都可以使用的预期效果：http: //codyhouse.co/demo/alternate-fixed-scroll-background/index.html
我感觉这与页面某处的位置标签有关。
css - 背景附件的后备：已修复
在生产站点上，我将background-attachment: fixed图像应用于body，并且我对不支持此样式规则的浏览器使用渐变回退，如果同一浏览器不支持渐变，则使用纯色背景回退。问题是，它不能可靠地工作。
我已经尝试使用as来检测background-attachment: fixed支持，但它并不一致，我在 iOS 和 Android 设备上得到了很多误报。我已经阅读了其他 SO 帖子，它们似乎都建议了具有巨大负面影响的解决方法，但与此同时，我意识到这里有一个权衡。document.body.style@supports
我也经常读到你不应该检测用户代理，因为它们可能被欺骗。如果我正在检测用户代理并且只将梯度回退应用到移动浏览器，那么有人将他们的代理欺骗为移动浏览器真的有缺点吗？如果发生这种情况，它们只会被呈现一个渐变背景。我是否需要担心有人试图将他们的移动浏览器的用户代理欺骗为桌面浏览器代理，或者我在这里错过了更大的东西？我不能说我真的想这样做，因为它部分地杀死了我内心，但我想我会问。
昨晚我只是想到了上述内容，但我真的只是在寻找在生产级站点上应用某种类似后备的人，而不会显着降低用户体验。
html - 在没有背景附件的情况下缩放背景图像：固定？
我试图找出使背景图像完全响应的最佳方法 - 到目前为止，我能想到的最好方法是使用 background-size: 覆盖，正如大多数人倾向于建议的那样，但使用background-attachment: fixed以便图像在屏幕调整大小时缩小其比例，否则它只会保留其原始比例并且根本不缩放。仅使用 background-size:cover 拉伸图像以填充容器 div，但不会自动缩放比例..
但是，我不希望在您向下滚动时隐藏部分图像的固定背景的效果，并且希望它是背景附件：滚动，但我无法让它工作并使其也可以缩放。
所以我的问题是：有什么我不知道的方法可以让背景图像随屏幕大小自动缩放，而无需使用 background-attachment: fixed 来实现它？
请查看我的 JSFiddle，了解我目前所拥有的：https ://jsfiddle.net/uhoL5d5w/2/
（是的，我也知道在某些时候我需要使用媒体查询来为各种屏幕尺寸提供优化的图像）
我当前的代码如下所示：
html - CSS背景附件和大小
我试图让我的图像在其容器内滚动页面，但不使其固定（我需要它上下滚动，这样说:)）。我已经知道将图像设置为背景并将背景附件设置为固定应该可以。像这样的东西：
首先 - 它不会产生谷歌向我承诺的效果。有什么建议么？其次，有人可以告诉我这是否是将背景图像安装到其容器并完全实现此效果的最佳实践？
[编辑]：尽可能具体：问题是什么都没有发生。就像我从未添加背景附件规则一样。