Question

我正在使用Rails构建基本博客4.为了美观，我使用了zurb-foundation gem，它遵循响应式网络应用程序中使用的标准网格设计。

我想知道是否可以在整个博客中显示背景图像。基本上我想用图像填充白色区域并将漂亮的小页脚移动到图像的底部。

该博客目前托管于Heroku at thawing-ravine-8558.heroku.net。

application.html.erb文件如下所示：

<!DOCTYPE html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7 ]> <html class="ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->
  <head>
    <meta charset="utf-8" />

    <!-- Uncomment to make IE8 render like IE7 -->
    <!-- <meta http-equiv="X-UA-Compatible" content="IE=7" /> -->

    <!-- Set the viewport width to device width for mobile -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title><%= content_for?(:title) ? yield(:title) : "Portfolio by Adam Wanninger" %></title>

    <%= stylesheet_link_tag    "application", :media => "all" %>
    <%= javascript_include_tag "vendor/custom.modernizr" %>
    <%= csrf_meta_tags %>
    <%= auto_discovery_link_tag(:atom, posts_path(:atom)) %>
  </head>

  <body>
    <%= render :partial => 'layouts/header' %>

    <div id="main">
    <%= yield %>
    <!--must be set to defaults for windows, no explanation found?-->
    <!--http://stackoverflow.com/questions/16739581/possible-to-get-rails-4-working-on-windows-->
    <%= javascript_include_tag "defaults" %>
    </div>

    <%= render :partial => 'layouts/footer' %>
  </body>
</html>

common.css.scss文件如下所示：

input[type="submit"] {
  @include button;
}

div#main {
  @include grid-row;
  //background-size: cover;
  //background-image: url("architecture.jpg");
}

footer {
  margin-top: 50px;
  background-color: #000;
  color: #eee;
  text-align: center;
  p {
    line-height: 100px;
  }
}

正如您在我的.css文件中所看到的，我已经在资产管道中准备好了一个图像。如果我包含它，它只填写我页面上最中心的列，我希望它覆盖整个页面（但仍然保留页眉和页脚）

Answer 1

您可以将图像作为背景应用于身体标记，如 -

body {
  background-image: url('your/asset/link/here')
}

如果这是您的目的，那么不是100％肯定。

然后将其他相应的样式应用于页眉和页脚，如果需要，可以使用z-index将页眉和页脚背景颜色保持在正文颜色之上。

Answer 2

尝试以下方法：

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

（资料来源：https://css-tricks.com/perfect-full-page-background-image/）

请注意使用image-url而不是url。这是为了确保图像也在开发环境中显示。

如何在列式页面

2 个答案: