问题标签 [background-attachment]

我试图在滚动内容的末尾显示一个渐变，方法是使用带有background-position: bottom和的线性渐变background-attachment: local。这适用于除 IE 和 Edge 之外的所有浏览器。我可以接受它，就好像它不会到处说这个功能已经完全开发了一样。

我只是找不到任何解决方案。它应该像那样工作，但显然不是。我错过了一些东西，但我不知道是什么。

重要的是，当内容小于父级时，内容保持垂直居中，并且滚动渐变在任何情况下都有效（大/小内容和任何滚动位置）。

margin: auto比 align-items 更好地垂直居中 flex 项目：在滚动环境中居中

此代码应显示一个内容溢出的框，仅当您滚动到内容末尾时才会显示渐变。在 IE/Edge 中，渐变已经在内容中间显示页面加载。滚动时它会随着内容滚动。非常丑陋，绝对不是故意的。

这里还有一些可以玩的代码笔。

https://codepen.io/yesman82/pen/KJbrLo

我真的很接近我想要的，一个 3 列布局，其中只有中心内容通过普通滚动条滚动。

我的问题是外部图像/列有背景附件：已修复，它有效，但到目前为止我无法像我想要的那样定位背景图像。

我能够使其工作的唯一方法是将左侧放置在左侧，将右侧放置在右侧（这与我正在寻找的相反）。这使得图像在您加宽页面时尽可能宽，我希望它们保持紧密并在页面宽度降低时使其外边缘溢出。

我可以通过示例更好地展示我想要的效果。

1.）这个有固定的背景图像滚动，但随着页面变宽，它们不会紧紧地拥抱中心的内容，而是移动到外面。当它们溢出时，它们会向内部溢出——我正在寻找与这两种行为相反的行为。

https://codepen.io/xcr/pen/drNXPx

2.）除了背景图像没有固定并随内容滚动之外，下面的这个完美地工作

https://codepen.io/xcr/pen/Jzbepo

这些示例中唯一的区别应该是 CSS 中的 background-position 和 background-attachment 属性。

第一个示例中的 html 和 css（接近工作）是

我正在尝试在 Tailwind 或纯 CSS 上制作类似的东西......

所以基本上我们可以在元素之间共享一些类似这样的 css 的背景（我们在每个元素上使用这个类）：

问题是“背景附件：固定”是相对于视口而不是容器元素。所以为了看到完整的色阶，我必须最大化浏览器。

这个或任何与容器相关但与视口无关的背景附件有什么技巧吗？

我正在创建一个网站，使用 chrome 进行调试。我正在创建一个滚动页面，其中包含全高图像作为我的部门的背景图像，使用“背景尺寸：封面；” 和“背景附件：固定；”。

在我的电脑上的 chrome（移动）调试查看器上，即使有更多的滚动文本可以覆盖图像，图像保持相同大小，并且内容只是滚动到未放大或扭曲的图像上。

上传到 s3 并在我的移动设备上查看后，具有大量内容的 div 的背景图像会放大照片（假设它这样做是为了继续覆盖），看起来不太好。

到目前为止，我已经尝试将内容包装器的背景附件更改为固定，然后滚动以查看它是否有效；它没。唯一允许背景图像不放大的是将背景大小从封面更改为 100% 80%;。这保留了原始缩放，但显然没有覆盖所有文本，导致一个全尺寸图像 div 和下一个之间存在间隙。

预期结果：背景图像覆盖移动设备上 100% 的视口，允许文本和其他内容在其上滚动而不放大

实际结果：背景图像放大以覆盖所有内容区域，导致像素化和糟糕的视觉体验。

我真的被这个困住了。我正在设计一个视差效果，我background-position使用 jQuery 移动固定背景的属性。jQuery 在这里没有错，所以我不会在此处包含它以降低问题的复杂性。

在 Chrome 中，我得到了想要的效果。在 Firefox 或 Edge 中，这是一场噩梦。我还没有在 Opera 上测试过它。background-attachment: fixed在这些浏览器中从类中删除时.skewhero-image，我注意到没有任何区别。该属性没有做任何事情，因为当我在 Chrome 中删除相同的属性时，我会得到与其他浏览器相同的不良结果。

如何更改我的代码以实现与现在在 Chrome 中完全相同的效果，但在所有其他桌面浏览器中也是如此？不包括移动浏览器。

基本上，猫的形象不能移动，只能移动它周围的容器。在 Chrome 中，这可以按预期工作。在 Firefox 或 Edge 中，猫随容器移动，而不是固定在视口上。

编辑：我发现从自身和所有父级中省略所有 transform属性会将图像修复到视口。有什么可以补救的吗？

我在我的 ReactJS 网站中使用固定的背景图像。即使不同元素的相同 CSS 属性运行良好，我在标题区域中使用的图像也被奇怪地拉伸（放大，只有一小部分图片可见）。

应用程序.js

应用程序.css

现在“header”元素中的图像显示为缩放，而不是应有的覆盖视口。“bg-img1”元素中的图像正确显示。

我错过了什么？

我试图为每一行显示一个行号。我的代码在 Chrome 中正常工作，但在 Firefox 中由于 background-attachment: local; 它无法正常工作 在 Firefox 中不接受。我希望它应该在两种浏览器中都可以使用。

JsFiddle：https ://jsfiddle.net/k8go4d5b/

这是我的代码：

我使用的一些论坛没有固定的背景，我觉得它令人眼花缭乱。我希望用 TamperMonkey 插件来改变它，但它需要脚本，我不知道如何创建脚本。我发现了一个类似的主题，尽管是较旧的主题，但脚本不起作用。

所以，假设我想把这样的东西： body {background: url('image') fixed;}或body {background-image: url('image');background-attachment: fixed;} 变成一个脚本。我该怎么做呢？我使用 Firefox，不确定这是否重要。

我在这里遇到了一个奇怪的问题，基本上我只想制作一个滑块，每个滑块项都有名为滑块背景的内部子项，它包含图像的 url / 路径的 data-src 自定义属性，然后我使用 jQuery 来更改背景-每个滑块背景的图像来自每个滑块的“data-src”属性值。

之前它工作得很好，在我更改 css 之后，它的行为很奇怪，我使用背景附件固定，所以当用户滚动时看起来滑块背景没有滚动，效果很好，但我把它们都放在了一个滑块。我将背景属性放在css端，只通过jquery动态更改图像，当我使用“固定”时，我得到的只是一个空白灰色（默认背景），但是当我使用除“固定”以外的任何背景附件时图像背景正确显示。这是为什么？

我在做同样的事情，使用相同的小滑块，但使用香草 js，它很好，相同的原理，但是这个，一个需要使用 jQuery 的新项目，它只是空白。

请帮助，请参阅下面的代码。谢谢！

我在想我们写background: inherit;的时候应该准确地获取所有的父属性，根据它，应该复制子元素的背景，对吗？

但是今天当我使用背景附件时，我遇到了一个奇怪的结果，似乎我们使用时background-attachment: fixed;没有进一步的继承：

如您所见，上述代码的结果似乎与#first{ background:transparent; ...}.

谁能解释为什么会发生这种情况background-attachment: fixed;？我通过互联网搜索但我找不到我的答案，几乎所有的网站都给我同样的非理性解释：

background-attachment 属性指定背景图像是滚动还是固定（不会随着页面的其余部分滚动）：