我目前正在做一个视差网站主题.对于某些'div'和'section,需要将背景图像附加为固定的,以避免jquery沉迷于所有内容.问题是任何动画项目下方标签的背景图像在转换完成时消失,仅在Google Chrome上.补救？

我有一个包含背景图像的图表列表.类似于以下内容:

<ul>
  <li>
    <figure style="background-image: url(...);"></figure>
  </li>
  <li>
    <figure style="background-image: url(...);"></figure>
  </li>
  <li>
    <figure style="background-image: url(...);"></figure>
  </li>
</ul>

这些图像中的每一个都background-size设置为cover并background-attachment设置为fixed.

figure {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-attachment: fixed;
}

当每个图形占据整个视口时,这可以正常工作,但如果存在任何类型的偏移,则背景图像被剪切.

据我所知,这是设计(https://developer.mozilla.org/en-US/docs/Web/CSS/background-size#Values).

我希望图像可以垂直或水平剪辑,但不能同时剪辑,而是以图形本身的大小为中心.

我知道有javascript解决方案但是有没有办法用CSS做到这一点？

这是一个工作示例:http://codepen.io/Godwin/pen/KepiJ

我有一段时间没有这个问题,它似乎是一个尚未修复的Chrome重绘错误.所以我正在寻找任何止损修复.

主要问题是当页面上的元素具有使用以下内容的背景图像时:

background-attachment: fixed;

如果另一个元素被修复并且具有子视频元素,则会导致具有背景图像的元素消失.

现在它在Safari(以及Firefox和IE)中运行良好,因此它不是一个webkit问题.我已经应用了几个被认为无用的属性.

-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);

初始演示

目前,我的解决方案是通过媒体查询以固定的bg图像为目标,然后关闭固定的背景属性.

@media screen and (-webkit-min-device-pixel-ratio:0) {
background-attachment: scroll;
}

有任何想法吗？

更新

丹尼尔感谢工作演示.

更新2

更好的演示!

大喊答题节目环节以somesayinice和FourKitchens博客文章

background-attachment: fixed在Firefox中关闭CSS值转换.

这是一个例子

div {
   transform: translate3d(0,0,0); // if remove starts to work
   width: 100%;
   height: 2000px;
   background-image: url('http://www.wallpapereast.com/static/images/001_Fish-Wallpaper-HD_hkNsK33.jpg');
   background-size: cover;
   background-attachment: fixed;
}

<div></div>

如果你从CSS中删除转换它开始工作.仅可在FF中重现.

我有一个缩放的背景图像以适应其容器内部,当Modernizr检测到浏览器不支持背景大小时,我有适当的后备(未显示).

.wrap {
    width: 200px;
    height: 116px;
    position: absolute;
    background-image: url(image.jpg);
    background-attachment: fixed;
    background-position: 0 0;
    background-size: 200px 116px;
    background-repeat: no-repeat;
}

这是一个例子:http://jsfiddle.net/crowjonah/6xYNm/

它在Chrome,Firefox,Safari(桌面和iOS)中看起来很漂亮,但是我在某些Android实例上遇到了麻烦.

这是一个正确显示的设备的UA:

Mozilla/5.0 (Linux; U; Android 4.0.4; en-us; Xoom Build/IMM76L) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Safari/534.30

这是一个没有的设备的UA:

Mozilla/5.0 (Linux; U; Android 4.2.2; en-us; sdk Build/JB_MR1.1) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30

较新版本的Android(模拟)将固定的背景图像缩放为全部图像并按像素化以便适合(我认为)视口,并且不会注意其容器或定义的大小background-size.

这一切都很好.事实上,这就是MDN所说的将会发生的事情:

如果背景的附件是固定的,则背景定位区域是浏览器窗口的整个区域,不包括滚动条所覆盖的区域(如果它们存在).

我的问题是我不知道如何合理地检测何时会发生或不会发生这种情况,以便我可以相应地进行调整.由于页面上的布局和动画,我确实希望为所有支持它的浏览器修复背景,并且scroll如果我能弄清楚如何定位它,可以在这种异常情况下解决.

更新( 2013年10月3日):为了防止混淆,我更新了小提示,以演示一个更现实和有问题的示例,证明了我定义的更多CSS属性:http://jsfiddle.net/crowjonah/QtpVN /

背景

(之前有人问 过,很多次,我知道.但是,它似乎每次都是由不同的事情引起的.我已经完成了四个不同的StackOverflow答案线程并尝试了所有内容.似乎没有什么工作了,所以我相信这是一个新问题.)

无论如何,我有一个HMTL元素,背景图像需要修复,使用 background-attachment:fixed;

• 所有桌面浏览器 - Works
• 移动Firefox - 工作
• 默认Android /三星浏览器 - 工作
• 移动Chrome - 无效

我已经将问题转换为更简单的可复制测试,这是一个单独的section元素,设置为200%页面高度,背景是全屏和固定的.

码

html,body {
    padding:0;
    margin:0;
    height:100%;
    width:100%;
}
section {
    background-position:center center;
    background-attachment:fixed;
    background-size:cover;
    background-image:url(http://www.andymercer.net/wp-content/themes/andymercer/images/background/home.png);
    height:200%;
    width:100%;
}

<section>Test</section>

JSFiddle For Testing

为了便于在智能手机上进行测试而不是代码片段:http://jsfiddle.net/LerLz1L2/

我试过的事情

• backface-visibility: hidden;
• -webkit-backface-visibility:inherit;
• -webkit-transform: translate3d(0,0,0);
• 设置元素和所有父母 position:static

注意到IE11中的一个奇怪而烦人的错误.使用带有背景附件固定的css放置在背景中的图像在滚动时进行奇怪的上下摇晃舞蹈.它主要发生在使用滚轮或使用滚动条上的箭头按钮时.如果你通过拖动滚动条滚动它似乎不会发生.

尝试这个小提琴:http://jsfiddle.net/G6Mdu/使用IE时你可以看到图像微动.在chrome,firefox等上运行正常.

 #test{
     height: 510px;
     width:100%;
     background-position: center top;
     background-attachment: fixed;
     background-size: cover;
 }

任何解决方案

我正在开发一个cordova应用程序,我正在尝试获得固定的背景.不幸的是,它似乎没有工作,任何时候我向下滚动背景只是从页面的顶部.这是我用来做这个的CSS(我已经尝试过其他几种方式):

html {
    width:100%;
    height: 100%;
    background-color:#000000;
    background-image:url('../img/bg_reader.jpg');
    /*background-repeat:no-repeat;
    background-attachment: fixed;
    background-position: center;*/
    background-size: 100% 100%;
}

无论如何,当我向下滚动时,背景会从屏幕顶部滚动,就像没有设置固定属性一样.

我的背景有一个非常奇怪的问题.当我将背景附件更改为固定在css中时,我的菜单中的字体因为某些我无法弄清楚的原因而变小.当我将其更改为滚动或本地时,它会恢复到所谓的大小.出现这种情况的原因是什么？

编辑

提供OP的示例:

我只在Safari(Chrome就可以)和只在某些机器上出现问题(MacBook Pros 15上可重现,非视网膜显示,但不适用于iMac和视网膜显示机).OSX:10.8.5,10.9.1 Safari版本:6.1.1,7.0.1.

不幸的是,我不能用jsfiddle重现这个问题,因为它不会发生在iframe中(iframe的内容会对它做出反应,但这强烈暗示了浏览器错误恕我直言).

以下是您可以在本地查看的示例HTML:

<html>
    <body style="background-image: url(http://static4.depositphotos.com/1000419/321/v/950/depositphotos_3210195-Art-tree-beautiful-black-silhouette.jpg); background-attachment: fixed;">
    <p style="font-family: Arial; font-size: 30px;">some fun text</p>
    </body>
</html>

在检查器中选择正文标记并切换background-attachment规则.您将看到的是字体略有变化(更纤细/更大胆).

我想知道,这是多少问题以及哪些机器受到影响,这样问题最终可能会到达一些可怜的Apple开发人员... :)

更新

有趣的事实:-webkit-transform: translateZ(0);可以用作解决方法.为什么它有效我不知道......

目标:在Firefox中运行的转换元素中创建固定的背景位置.

我已经在这个页面上尝试了所有解决方案(以及其他一些解决方案),但没有一个有效: 固定附件背景图像闪烁/在与css转换结合时消失在chrome中

我尝试过的东西是静态位置,背面可见性设置,z-index设置,其他背景附件.

演示:

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

.fixed1 {
   transform: translateZ(0);
}

如果你删除上面的转换,它的工作原理.但是,如果您正在使用Skrollr之类的东西,或者还有其他需要进行转换,那么在Firefox中没有正确修复背景.