问题标签 [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.

0 投票
3 回答
1474 浏览

html - 固定到包装器 div 的背景附件

我有这样的情况:http: //jsfiddle.net/5axmtw9g/3/

正如您在小提琴中看到的,固定的背景图像定位到窗口而不是包装器。正如预期的那样,我希望图像位于“content-middle”div 的开头。使用任何带有 background-size:cover 的解决方案都不适合我,因为我将避免图像拉伸。非常感谢您的帮助,因为我对此有所帮助并且找不到可行的解决方案。在此先感谢!在此处输入代码

0 投票
1 回答
2551 浏览

jquery - 背景附件:修复了无法在 chrome 中使用光滑滑块的问题

我已经创建了 jquery 光滑的滑块。我想要background-attachment:fixed的。它在 moz、IE 中运行良好,但在 google chrome 中无法运行。

找到小提琴演示

HTML:

CSS:

JS:

0 投票
2 回答
2538 浏览

css - CSS - 背景附件:固定不停止滚动(tumblr 主题)

我正在为 tumblr 主题进行一些编码并遇到了这个问题:“背景附件:固定”不会阻止背景图像上下滚动;它仍然随着内容移动。

HTML

CSS

宽度也不起作用,但有人告诉我这就是固定的工作方式,我只是想解决图像仍然移动的事实。

0 投票
2 回答
68 浏览

html - Fixed to window, but contained inside container

I have some HTML set up like this:

The cover element is uses background-attachment: fixed; to create a parallax effect. What I'm trying to achieve is have the overlay element behave the same way, where the text in it is fixed to the viewport, but still contained inside the mediasection div, so that when the user scrolls the page the cover and overlay stay in the same position, but disappear as the mediasection element goes out of view.

Is there any way to achieve this?

tl;dr; Some sort of background-attachment: fixed; to regular elements, not just the background.

Thanks!

0 投票
1 回答
173 浏览

android - Android 上的跳跃行为

在我的网站部分的背景图像上使用全宽和全高,但我在 Android 上遇到了一些跳跃行为。我正在使用modernizr 来检测触摸事件并将背景附件从固定更改为本地。这是网站,下面是我正在使用的 css:

0 投票
3 回答
1098 浏览

javascript - 如何替换背景附件:固定在移动设备上?

我的网站上有多个部分在背景上提供“视差”样式效果,这在许多移动平台上被禁用。

我想使用一些 jQuery 或 javascript 来"background-attachment:fixed"替换"background-attachment: scroll".

我并不热衷于手动更新每个位置(这是一个巨大的项目),我很高兴在移动设备上失去视差效果并退回到background-size: cover

没有发布任何代码,因为我不确定从哪里开始。

0 投票
0 回答
331 浏览

html - CSS:背景附件:固定和边框半径

我有一个带有大背景图片的网站。现在我想添加也有背景图像的圆形按钮/链接。

它在 Chrome 和 IE 中呈现良好,但 Firefox 显示一个丑陋的盒子,与它background-color相同<body>

一旦您 background-attachment: fixed;外部容器与border-radius圆形按钮结合起来,问题似乎就会出现。

我想这是一个 Firefox 错误。有人有解决方法吗?

PS:如果我在这里通过“运行代码片段”运行它,它会在 Firefox 中正确呈现!这是为什么?!

Chrome/IE(两个圆圈都是正确的):

在此处输入图像描述

Firefox(第二个圆圈,粉红色框有background-attachment: fixed;,已损坏):

火狐

0 投票
1 回答
2095 浏览

html - CSS - 固定背景附件使白色条出现在某些滚动位置

我有一个标题,其背景设置为background-attachment: fixed;,但这会使页面顶部的某些滚动位置出现一条白色条带(背景模糊,因此条带也模糊,但仍然可见) .

顶部的白色条带 这就是它目前的样子;顶部有那种白光,就是我说的那个带子

我现在的代码是这样的(如果你运行代码片段,请全屏查看,因为我还没有让它与移动设备兼容):Codepen上编辑

要查看条带,请向下滚动,直到屏幕上只有一个小标题。

当您更改background-attachment: fixed;为时,条带会消失background-attachment: scroll;,但我想保持固定。

我觉得我忽略了某些东西,但我想不出任何可能导致此问题的原因,那么导致此问题的原因是什么,我该如何解决?

0 投票
1 回答
2068 浏览

html - 修复了带有顶部导航栏和滚动的背景

我正在为我姐姐的生日创建一个假公司的网站,我在固定背景上遇到了一点麻烦。我知道它应该很简单,只是一个附件问题:已修复,但由于某种原因它似乎不起作用。好吧,原因显然是我,但我认为你可以帮助我:)

这是网站:http ://camilleperrin.fr/BBE/ ,当您必须滚动时会出现问题(如果您的分辨率为 1920x1080,则在此页面上:http: //camilleperrin.fr/BBE/index.php?页=职业)。如果您有一个巨大的屏幕并且看不到问题,则背景图像不会停留在应有的位置,并随着滚动而下降。

这是我的代码(我得到了 Internet 的帮助,这一切都不是我自己想出来的):

CSS:

HTML:

如果您知道如何在保留模糊文本容器的同时解决此问题,那将非常有帮助。

谢谢!

卡米尔

0 投票
1 回答
3404 浏览

html - 背景图像中包含文本滚动?

我有 2 个要滚动的背景图像,并且我希望文本在滚动时保持在背景图像中。现在文本只是在滚动时放在图像的顶部,而且不是很清晰。我已经研究了几个小时,但似乎无法正确解决。我以前在网上看到过数百次这样做,但是当我自己去做时,我似乎找不到任何示例或有关如何完成的教程!

当我滚动时,背景图像也不会留在原位。有没有办法让页面停止滚动,直到图像和文本都完全滚动?

这是一个 jsfiddle:https ://jsfiddle.net/wf0vyj9w/ (很难让它工作......)

继承人 github:https ://github.com/Darkstar93/Resume

继承人的代码: