问题标签 [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 投票
2 回答
10625 浏览

css - CSS背景附件滚动/固定和背景大小封面

background-size:coverifbackground-attachment: scrollbackground-attachment: fixedused为什么不同?

例子:

http://jsfiddle.net/enriqg9/Yn43U/

0 投票
2 回答
603 浏览

html - 背景附件:将图像流体固定到某个点

我的背景图像仅在某一点上是流动的。调整浏览器大小时,它开始缩小

你可以在这里看到我在说什么

0 投票
8 回答
42719 浏览

css - Chrome issue with background-attachment fixed and position fixed elements

I've had this issue for a while and it seems to be a Chrome redraw bug that hasn't been fixed. So I'm looking for any stop-gap fixes.

The main issue is that when an element on the page has a background image that uses:

If another element is fixed and has a child video element it causes the element with the background image to disappear.

Now it works fine in Safari (and Firefox and IE) so it's not exactly a webkit issue. I've applied several properties that have been suggested to no avail.

Initial Demo

Currently my solution is just to target the elements with a fixed bg image via a media query and just turn off the fixed background property.

Any ideas?

Update

Working Demo thanks to Daniel.

Update 2

Better demo!

Shoutout to somesayinice and FourKitchens blog post

0 投票
1 回答
8806 浏览

html - 背景附件:固定 Internet Explorer 11 奇数上下抖动

注意到 IE11 中的一个奇怪且烦人的错误。使用固定背景附件的 css 放置在背景中的图像在滚动时会出现这种奇怪的上下抖动舞。它主要发生在使用滚轮或使用滚动条上的箭头按钮时。如果您通过拖动滚动条进行滚动,它似乎不会发生。

试试这个小提琴: http: //jsfiddle.net/G6Mdu/使用 IE 时,您可以看到图像抖动。在 chrome、firefox 等上运行良好。

任何解决方案?

0 投票
1 回答
70 浏览

css - CSS 修复了背景缩放/平移不适合 iPad

我已经彻底使用了搜索功能,但没有找到足够相关的答案来解决我的问题。

在我的新网站上,我正在实现一个固定的背景图像(大约 250x250 像素),设置为在用户向下滚动页面时跟随他们。从其他帖子和我自己的实验来看,CSS 属性“background-attachment:fixed”不适用于 iPad / iPhone 浏览器。

一位用户提出了一种解决方法,即创建一个看起来像这样的“背景包装”div:

这在一定程度上有效。这个解决方案的问题(对我来说)是,当用户在移动设备上进行捏合和缩放时,背景图像的缩放比例与前景内容的比例不同,从而产生草率、重叠的结果。

如果答案是显而易见的,请原谅我。我已经研究了几个小时(在这个网站和其他几个网站上),但无济于事。提前谢谢了。

0 投票
0 回答
313 浏览

jquery - iPad 上的固定位置背景

我有一个带有背景大小:封面和背景附件:固定的 div。这工作正常,除了在 iOS 上。

问题类似于这些问题: Using background-attachment:fixed in safari on the ipad Fixed Position Background on iOS

但不完全是。我找到的每个解决方案都是针对 body 标签上的固定背景。但我需要在动态页面中间的 div 中固定背景。因此,将假 div 设置为 position:fixed 对我不起作用。

是否有另一种方法可以使固定位置背景在 iOS 上工作?我需要 jQuery 吗?

0 投票
1 回答
1446 浏览

css - 背景附件:修复了仅适用于 Retina 的 Chrome 中的错误

在使用 background-attachment:fixed 时,我发现 Chrome 如何仅在视网膜屏幕上呈现背景图像的问题。Firefox 和 Safari 按预期工作。我还注意到,当我单击“开发人员工具”>“控制台”>“渲染”中的“启用连续页面重绘”框时,我可以让它在 Chrome 中工作。但是,这也会在启用时导致严重的性能问题。当图像从背景附件:固定更改为背景附件:滚动时,图像渲染良好,但随后我失去了预期的效果。

关于解决此问题的任何建议?或者我是否必须在视网膜设备上定位 Chrome 并终止该功能?

这是一个带有屏幕截图的问题的链接:

https://code.google.com/p/chromium/issues/detail?id=366012

0 投票
1 回答
158 浏览

css - 将固定背景与 CSS calc 对齐

我希望我尝试的不是不可能的。

让我先解释一下:我有一个响应式设计,在某些情况下需要固定背景(媒体查询块)。有问题的设计是这样的:

http://think-open.at/fileadmin/templates/responsive/content.html

基本上有两种媒体查询:一种用于最大高度,一种用于最小宽度。如果有足够的视口高度,则内容区域中有一个滚动条,并且设计高度是固定的。但是,如果视口不够大,无法显示预定义的高度,height-mediaquery 会从内部 div 中删除滚动条,因此不会有两个嵌套的滚动容器(body + div)并将内容区域设置为 height: auto。

如果视口太窄,还有一个响应式媒体查询,但这完美无缺。

现在的问题:当设计切换到整个页面滚动的模式(低于 830 像素高度)时,我想将图像定位在“固定”的右侧容器中,这样它就不会滚动出视口。但随之而来的问题是,我不能真正定位相对于容器 div 的背景,因为“固定”定位了相对于视口的背景图像。我在这里创建了一个 CSS fiddle:

http://dabblet.com/gist/ae5c3598e1465ce0c90e

如果您更改宽度,您会注意到问题。我想让图像的右边框与绿色框的右边框对齐。

这有可能吗?我使用 calc() 没有问题,因为如果检测到较旧的浏览器,我的 CMS 中将有一个条件使用普通的老式设计。

0 投票
1 回答
1024 浏览

css - 背景附件:滚动和背景大小:封面不起作用

我有一个背景图像,我想将其固定在较大的屏幕上并在较小的设备上滚动。

这很好用...

但是我希望能够使用...

使用background-attachment:scroll似乎可以杀死background-size:cover并以全尺寸显示(我认为更大)。当我background-attachment: scroll;在第一组 CSS 中进行测试时,它会做同样的事情。

这个确切的东西似乎在这个网站上工作...... http://www.julytalk.com/我错过了什么?

0 投票
1 回答
896 浏览

html - 如何进行背景附加:固定到 div 而不是视口

我有一个大背景封面。

和 CSS

预期输出:背景图像,调整为350px x 100%(在我的例子中为 350x900),应该具有基于<div id="cover"></div>.

实际输出:背景图像,调整为视口(在我的情况下为 1440x900),具有基于<html></html>.

我想要的是 background-attachment:fixed 相对于 div 而不是视口。