问题标签 [background-attachment]

我正在尝试找到解决我在 iOS 设备上使用固定背景时遇到的问题的方法。我宁愿不必为这个网站重新设计所有东西，我希望一些 CSS 更改可以修复它。这就是网站在 iPhone 上的样子，也是它应该的样子。我使用的 CSS 代码如下：

我也尝试过使用@mediastackoverflow上的一些帖子使用查询来修复iOS，但这似乎没有任何效果：

HTML

我有一个可滚动的 div，并试图在滚动 div 时在 div 顶部实现阴影。

我在 codepen 上找到了这个简单的实现： https ://codepen.io/bennyzhao/pen/iGoBm

这个例子确实对我有用，但是在我玩弄之后，我发现background-attachment: localwhendirection设置为的行为有些奇怪rtl。

我在 codepen 上创建了一个非常简单的示例来显示奇怪的行为： https ://codepen.io/Ron537/pen/ZLaqoG

我注意到问题存在Google Chrome于Microsoft Edge.

这是一个图像比较： Chrome vs Edge

如您所见，Google Chrome背景并没有占据整个 div 宽度，而是留下了一些空白空间。

这是一个已知的错误？有解决方案吗？

我想将我的第二个 Bootstrap 列的背景图像放在列的中心。但是，现在，它位于整个视图的中心，而不是列的中心。

这是我的代码：

HTML：

CSS：

这是一个jsfiddle：https ://jsfiddle.net/1m8ua78z/

我目前正在尝试使用 twitter bootstrap 创建一个网站。不幸的是，我无法创建背景图像，以便我的容器推动它。总是将背景推到我的背景图片上。有人可以告诉我该怎么做吗？

在这里你可以看到我的问题

这里是我的文件的链接

我正在尝试仅使用 CSS 而没有第三方库来创建视差滚动效果。使用background-attachment: fixed我能够在页面上的多个全角 div 上实现我想要的效果。但是，使用它会对性能产生很大的负面影响。我改为将方法更改为此处找到的方法：

我在一个 div 上使用了这种方法进行了尝试，效果非常好。然而，当我将它应用到其余部分时，背景全部重叠，我只看到其中一个（因为其余部分在它后面）。这显然是一个 z-index 问题，因为所有伪元素都是重叠的，但我想不出只有 CSS 的解决方案。

目标：在 Firefox 中工作的转换元素中创建固定的背景位置。

我已经尝试了此页面上的所有解决方案（以及其他一些解决方案），但没有一个有效： 固定附件背景图像在 chrome 中闪烁/消失，当与 css 转换结合使用时

我尝试使用的东西是静态位置、背面可见性设置、z-index 设置、其他背景附件。

演示：

https://jsfiddle.net/96u9xqbn/6/

如果您删除上面的转换，它可以工作。但是，如果您使用的是 Skrollr 之类的东西，或者对转换有其他需求，那么背景在 Firefox 中没有正确固定。

我有以下站点： https ://dasproject.netlify.com/lisa/ 编辑：没有问题了

在 Chrome 中打开它时，封面图像应该是固定的，但是在 Firefox 中打开时，背景附件：固定不起作用

到目前为止我所知道的：图像在一个滑块内，它使用transform: translate3d(). 这就是破坏背景附件的原因，但我不知道如何修复它（一个明显的是删除滑块，但我的目标是更简单的东西）

有什么想法为什么？我已经尝试了很多......在此先感谢

我正在尝试在使用“背景附件：固定”时使用百分比断点制作线性渐变。它没有按我的预期工作。

我对我的问题做了一个非常简单的小提琴。

https://jsfiddle.net/f8v1h0ac/

HTML

CSS

PS：我猜这是因为渐变的高度与窗口高度相关。但我不知道如何解决这个问题。

我正在尝试找到与内联 IMG 元素一起使用的 background-attachment:fixed 的仅 CSS 等效效果。我尝试过 position:fixed，但在这种情况下，从文档流中删除图像将不起作用。

这是我的代码笔：

https://codepen.io/julianapong/pen/vewmzw

理想情况下，我希望 img_absolute 或 img_fixed 以与 bg_fixed 相同的行为滚动。是否有任何 CSS 技巧可以做到这一点？

是否可以在以下条件下获得无缝模式重复？

想法是有一个带有固定附件的旋转背景。我认为这应该是如何工作的，但是有什么方法可以实现吗？