加载不同的背景图像而不加载默认值

Question

我的 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');
}

Answer 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');
}

加载不同的背景图像而不加载默认值

Load different background image without loading default

html

css

ruby-on-rails

background-image