Question

我正在使用一些背景图片的背景图片：cover;。它运行正常，直到我添加了Foundation的非画布菜单。背景图片不会显示在Chrome中。

如何解决这个问题？

谢谢！

Answer 1

这可能是Chrome方面的问题。您可以使用以下css代码覆盖它

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

Answer 2

对不起，我认为这可能是一个常见的问题。问题仅出在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>

场外冲突与封面背景图像

2 个答案: