Off-canvas与封面背景图冲突

Question

我正在使用背景尺寸为：cover; 的一些背景图片。运行没问题，直到我添加了基金会的关闭-canvas-菜单。 Chrome.

中未显示背景图像

知道如何解决这个问题吗？

谢谢！

Answer 1

抱歉，我认为这可能是一个常见问题。问题仅在 Chrome 和 Opera 中。我没试过IE。这是代码：

<!DOCTYPE html>
<html>
<head>
  <title>Test canvas</title>
  <link rel="stylesheet" href="css/foundation.css" />
    <style>
        .fondo-imagen-bn{
            height:1000px;
            background: url(img/foto-fondo-secciones.jpg) no-repeat center center fixed;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }
    </style>
</head>
<body>

  <div class="off-canvas-wrap" data-offcanvas>
    <div class="inner-wrap">
        <a class="left-off-canvas-toggle show-for-small-only" href="#" >Off Canvas Menu</a>

        <aside class="left-off-canvas-menu">
          <ul>
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 2</a></li>
          </ul>
        </aside>

        <section class="fondo-imagen-bn">
            <h1>Example with cover background</h1>
        </section>

        <footer style="height:300px;">   
          <h2>footer</h2>
        </footer>


    <a class="exit-off-canvas"></a>
  </div>
</div>

  <script src="js/vendor/jquery.js"></script>
  <script src="js/foundation.min.js"></script>
  <script src="js/foundation/foundation.js"></script>
  <script src="js/foundation/foundation.offcanvas.js"></script>
  <script src="js/scripts.js"></script>
  <script>
    $(document).foundation();
  </script>

Answer 2

背面有问题，可能在 Chrome 面。您可以使用以下 css 代码

覆盖它

.off-canvas-wrap, .inner-wrap {
  -webkit-backface-visibility: visible;
}

Off-canvas与封面背景图冲突

Off-canvas conflict with cover background images

zurb-foundation