问题标签 [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.
css - CSS背景附件滚动/固定和背景大小封面
background-size:cover
ifbackground-attachment: scroll
或background-attachment: fixed
used为什么不同?
例子:
html - 背景附件:将图像流体固定到某个点
我的背景图像仅在某一点上是流动的。调整浏览器大小时,它开始缩小
你可以在这里看到我在说什么
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.
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
Shoutout to somesayinice and FourKitchens blog post
html - 背景附件:固定 Internet Explorer 11 奇数上下抖动
注意到 IE11 中的一个奇怪且烦人的错误。使用固定背景附件的 css 放置在背景中的图像在滚动时会出现这种奇怪的上下抖动舞。它主要发生在使用滚轮或使用滚动条上的箭头按钮时。如果您通过拖动滚动条进行滚动,它似乎不会发生。
试试这个小提琴: http: //jsfiddle.net/G6Mdu/使用 IE 时,您可以看到图像抖动。在 chrome、firefox 等上运行良好。
任何解决方案?
css - CSS 修复了背景缩放/平移不适合 iPad
我已经彻底使用了搜索功能,但没有找到足够相关的答案来解决我的问题。
在我的新网站上,我正在实现一个固定的背景图像(大约 250x250 像素),设置为在用户向下滚动页面时跟随他们。从其他帖子和我自己的实验来看,CSS 属性“background-attachment:fixed”不适用于 iPad / iPhone 浏览器。
一位用户提出了一种解决方法,即创建一个看起来像这样的“背景包装”div:
这在一定程度上有效。这个解决方案的问题(对我来说)是,当用户在移动设备上进行捏合和缩放时,背景图像的缩放比例与前景内容的比例不同,从而产生草率、重叠的结果。
如果答案是显而易见的,请原谅我。我已经研究了几个小时(在这个网站和其他几个网站上),但无济于事。提前谢谢了。
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 吗?
css - 背景附件:修复了仅适用于 Retina 的 Chrome 中的错误
在使用 background-attachment:fixed 时,我发现 Chrome 如何仅在视网膜屏幕上呈现背景图像的问题。Firefox 和 Safari 按预期工作。我还注意到,当我单击“开发人员工具”>“控制台”>“渲染”中的“启用连续页面重绘”框时,我可以让它在 Chrome 中工作。但是,这也会在启用时导致严重的性能问题。当图像从背景附件:固定更改为背景附件:滚动时,图像渲染良好,但随后我失去了预期的效果。
关于解决此问题的任何建议?或者我是否必须在视网膜设备上定位 Chrome 并终止该功能?
这是一个带有屏幕截图的问题的链接:
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 中将有一个条件使用普通的老式设计。
css - 背景附件:滚动和背景大小:封面不起作用
我有一个背景图像,我想将其固定在较大的屏幕上并在较小的设备上滚动。
这很好用...
但是我希望能够使用...
使用background-attachment:scroll
似乎可以杀死background-size:cover
并以全尺寸显示(我认为更大)。当我background-attachment: scroll;
在第一组 CSS 中进行测试时,它会做同样的事情。
这个确切的东西似乎在这个网站上工作...... http://www.julytalk.com/我错过了什么?
html - 如何进行背景附加:固定到 div 而不是视口
我有一个大背景封面。
和 CSS
预期输出:背景图像,调整为350px x 100%(在我的例子中为 350x900),应该具有基于<div id="cover"></div>
.
实际输出:背景图像,调整为视口(在我的情况下为 1440x900),具有基于<html></html>
.
我想要的是 background-attachment:fixed 相对于 div 而不是视口。