问题标签 [background-attachment]

这是我的 CSS

照片的位置保持 (0% 0%) 就好像background-position从未存在过一样。有谁知道为什么会这样？

此外，如果我使用 chrome 并检查页面，并编辑任何 css，它会应用background-position. 说我取消background-position勾选并重新勾选。它将应用效果。我不确定为什么会发生这种情况，是被覆盖还是什么？

我在为同一页面上的不同元素添加背景时遇到了麻烦，可以使用一些帮助。我正在尝试使用“background-attachment”创建一个具有多个部分和背景（如http://ofarevolution.com/）的单页网站，但我无法显示多个背景。我要疯了，请帮忙。

这是我的设置：http ://codepen.io/marks828/pen/YWLKmw

我正在我的网站中实现视差滚动，但它不适用于移动设备，我不知道如何在移动设备上实现它。我认为这是因为，移动显示器是触摸屏，所以我们必须用手指来滚动，就像在 PC 中我们可以用鼠标滚动一样。提前致谢。

background-attachment: fixedCSS 值转换在 Firefox 中关闭。

这是示例

如果您从 CSS 中删除转换，它就会开始工作。只能在 FF 中重现。

我正在处理带有倾斜部分的全宽视差类型页面。问题在于 Firefox 中的 transform:skew() 似乎弄乱了 background-attachment:fixed 属性。它适用于 Chrome、Safari 和 IE11，但不适用于 Firefox。

有谁知道这个问题的任何解决方法或修复？

我的代码示例

我遇到了背景附件问题：已修复。当我将它应用于页面上的元素时，它会产生非常不稳定的滚动效果。本质上不是对用户来说不是好的体验。

我的代码在这里：

HTML

CSS

这是 codepen 的链接，它准确地显示了我在说什么： http ://codepen.io/reskk/pen/qaYJwq

编辑：整页 Codepen：http ://codepen.io/reskk/full/qaYJwq/

现在奇怪的是，当我将浏览器缩小到一个小宽度（比如 800 像素）时，滚动实际上变得非常平滑——就像你希望它出现在一个完成的项目上一样。

当浏览器处于其最大宽度（和最大高度，由于代码输入框的原因，您无法完全使用 codepen）时，就会发生不稳定的滚动。

我对此进行了广泛的搜索，但无法找到解决方案。

有人对此有任何想法吗？这是一个如此华丽的效果，但不幸的是它所产生的性能使它变得毫无用处。

谢谢，

雷斯克

所以我遇到的实际问题是我想要一个固定的背景图像效果，同时保持背景图像足够宽以填充容器。不幸的是，使用 CSS 方式background-attachment:fixed;只会将图像相对于视口定位。这会在宽高比与背景图像完全不同的屏幕尺寸上产生问题，从而导致背景图像（即人的照片）被不必要的剪裁。

我目前得出的解决方案是使用滚动动画来模拟 JavaScriptbackground-size: contain以防止在所有屏幕尺寸上剪切图像。问题是，如果我然后单击一个按钮，该按钮会导致页面下方出现动画，则图像的设置是生涩的。background-attachment: fixedbackground-position-yscrollTopbackground-position-y

知道如何防止动画中出现这种抖动吗？

答案：background-attachment

----- JSBin 示例----

答案是使用background-attachment

原始问题

我正在做一个项目，我们想要显示一个“透视”到背景的模态，但模态面板之外的任何地方都被稍微掩盖了。

我已经成功使用border: 10000px rgba(0,0,0,0.3)了，border-radius: 10010px但这是一个 hack，我无法用box-shadow

有没有这样做的标准方法？如果您能想到一种将透明度滤镜渐变应用于图像的方法，则可以加分。

所以我有这个关于页面的多个背景附件图片。除了一个之外的所有工作。我浏览了代码，似乎无法找出为什么没有显示。任何人都有时间检查会很棒的视图源。http://idunlap.com/about.html

我正在尝试为 spn web 应用程序设置背景图像，并且我需要修复背景（它不会与页面的其余部分一起滚动）。

这是身体CSS：

IOS 中的 Safari 和 Android 上的 Chrome 会重复背景，而不是一次性修复它。

我在互联网上看到它已在移动设备上禁用，但有解决方案吗？