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