Zurb foundation 画布外与封面背景图像冲突

Zurb foundation 画布外与封面背景图像冲突,zurb-foundation,Zurb Foundation,我正在使用一些背景大小为:cover;的背景图像;。在我添加基金会的非画布菜单之前,它一直运行正常。背景图像不显示在Chrome中 你知道怎么解决这个问题吗 谢谢 对不起,我想这可能是一个常见的问题。问题只存在于Chrome和Opera中。我没有尝试IE。以下是代码: <!DOCTYPE html> <html> <head> <title>Test canvas</title> <link rel="stylesheet

我正在使用一些背景大小为:cover;的背景图像;。在我添加基金会的非画布菜单之前,它一直运行正常。背景图像不显示在Chrome中

你知道怎么解决这个问题吗


谢谢

对不起,我想这可能是一个常见的问题。问题只存在于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>

背面有问题,可能是镀铬的一面。您可以使用以下css代码覆盖它

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

我在darkoh.net中使用了背景图像,没有任何问题。请在您的问题中添加一些示例代码。非常感谢。另请参见,我最终使用了-webkit backface visibility:inherit;但这也行得通。