加载不同的背景图片而不加载默认值答案

【问题标题】：Load different background image without loading default加载不同的背景图片而不加载默认值
【发布时间】：2016-08-24 14:44:31
【问题描述】：

我的 rails 项目的所有页面都有一个默认的图案背景。我正在尝试使用全屏背景图像设置根页面。加载后，这按预期工作。但是，当打开页面时，可以看到两步延迟，因为页面首先打开默认的彩色背景，然后将图像放在页面上。有没有办法我不能在这个视图上加载默认背景，以避免在加载过程中出现两步视图？

我已为我的根视图 (static_pages#index) 提供了一个#landing-page id。

CSS：

#landing-page {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: url(ripples.jpeg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

body {
  background: url('congruent_pentagon.png');
}

【问题讨论】：

标签： html css ruby-on-rails background-image

【解决方案1】：

如果第一个背景来自正文，解决方案将在布局中为主要页面和其他页面添加不同的类

<body class="<%= current_page?('/') ? 'main-page' : 'page' %>">

改为在你的 CSS 中

body {
    background: url('congruent_pentagon.png');
}

写

.main-page {
    background: none;
}

.page {
    background: url('congruent_pentagon.png');
}

【讨论】：