css – 使用Zurb Foundation时设置网页背景图像？

2023年7月7日 198次阅读

我使用以下
css3 code to make a background image a near perfect 100%的浏览器窗口：

html { 
    background: url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

但是,我也使用Zurb Foundation 3 css框架,它会自动使body元素具有白色背景……因此隐藏了上面的背景图像.显然我可以覆盖它,但它让我觉得我需要以一种特殊的方式使用Foundation来处理上面的背景.真的吗？或者我还需要这个：

body {
  background: transparent !important;
}

最佳答案 我使用的是Foundation 5但不使用渐变的图像,但如果您想使用图像则应该使用相同的图像. . .

横幅

<div id="banner">
    <div class="row">
        <div class="small-12 columns">Some Content Here</div>
    </div>
</div>

CSS – 注意宽度和Z-INDEX这意味着背景占据页面宽度的100％,而z-index将它置于任何基础之下其他元素
应用此方法的最佳方法是在页面上或在foundation.min.css之后加载的样式表上,否则它不会覆盖基础的预设.

#banner{
    width:100%;
    height:100%;
    min-height:100%;
    z-index:-999;
    background: url(images/bg.jpg) no-repeat center center fixed; 
    margin:0;padding:0;
}
点赞