在滚动 div 中时，背景附件在 chrome 中不起作用

Question

基本上，当背景图像在滚动中时 div 它将不再固定，而是恢复为滚动：

CSS:

<div class="wrapper">
  <span></span>
</div>

HTML:

html, body{
  width: 100%;
  height: 100%;
  margin: 0;
}

.wrapper{
  width: 90%;
  height: 1000px;
  margin: 0 auto;
  overflow: scroll;
}

span{
  background-image: url(http://i.imgur.com/Q3NruNr.jpg);
  height: 1500px;
  width: 100%;
  display: block;
  margin: 0 auto;
  background-attachment: fixed;
  background-size: cover;
}

它在 firefox 中运行良好，但 chrome 似乎无法处理它。有解决办法吗？

http://codepen.io/mattcoady/pen/BooyaZ

Answer 1

这是 Chrome 中的一个已知错误，经常发生，但我觉得每次修复都不同:(

这里有一个 Codepen http://codepen.io/anon/pen/VvvYJz

我添加的全部是

-webkit-transform: translateY(0%);
    -moz-transform: translateY(0%);
    -ms-transform: translateY(0%);
    transform: translateY(0%);

添加到您的 span 标签，如果这是您想要的效果，请告诉我。

Chromium 问题 https://code.google.com/p/chromium/issues/detail?id=20574

Answer 2

感谢 NooBskie，它对我有用，使用 Bootstrap v3.3.2 的模态显示固定背景：

-webkit-transform: translateY(0%);
-moz-transform: translateY(0%);
-ms-transform: translateY(0%);
transform: translateY(0%);

在滚动 div 中时，背景附件在 chrome 中不起作用

Background-attachment fixed doesn't work in chrome when inside a scrolling div

css

google-chrome

background-image

background-position