背景附件图片：修复了无法在移动设备上运行的问题答案

【问题标题】：background-attachment image: fixed not working on mobile背景附件图片：修复了无法在移动设备上运行的问题
【发布时间】：2017-09-10 04:40:44
【问题描述】：

我正在建立一个网站，我希望在其中固定背景图像。我已经使用下面的 CSS 在桌面浏览器中实现了这一点，但它不适用于智能手机。这是背景附件的已知错误：已修复。我不知道如何解决它。

#page-header{
  height: 300px;
  background: url("../img/wood.jpg");
  background-attachment: fixed;
  color: #fff;
  border-bottom: 1px #eee solid;
  padding-top: 50px;
}

我的 HTML

<header id="page-header">
  <div class="container">
    <div class="row">
      <div class="col-md-6 offset-md-3 text-center">
        <h1 id="h1header">Products</h1>
        <p>Local, Organic, Tasty</p>
      </div>
    </div>
  </div>
</header>

你可以在http://maisonbergeret.com/product.html找到我的网站

我的问题是如何保持完全相同的效果。

【问题讨论】：

this 和 this 和 this 的可能重复
background: fixed no repeat not working on mobile的可能重复
谢谢你的链接，但它没有相同的效果。

标签： html css

【解决方案1】：

这是我为页眉更改的内容。

#page-header:before{
  content: "";
  width: 100%;
  height: 300px;
  position: fixed;
  background: url("../img/wood.jpg")no-repeat center center;
  color: #fff;
  border-bottom: 1px #eee solid;
  padding-top: 50px;
  z-index: -10;
  display: block;
  left: 0;
  top: 0;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

在标题下方，我有一个 id="products" 的部分产品

section#products{
    background-color: #FAEBD7;
}

与我的身体背景颜色相同的颜色：#FAEBD7;

调整了边距，现在可以使用了。

【讨论】：