Rails 5.1 CSS背景图像ID未加载？答案

【问题标题】：Rails 5.1 CSS background image id not loading?Rails 5.1 CSS背景图像ID未加载？
【发布时间】：2017-12-16 11:47:57
【问题描述】：

所以我一直在向我的主页添加背景图片，但是，背景图片永远不会加载。

application.scss 文件：

#background {
  position: fixed;
  top: 50%;
  left: 50%;
  min-width: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  background: url(background.jpg);
  background-size: cover; 
}

现在，添加同一行背景： url(background.jpg);到身体，会工作：

body {
  color: #fff;
  text-align: center;
  text-shadow: 0 .05rem .1rem rgba(0,0,0,.5);
  background: url(background.jpg);
}

所以这行得通，但是当我将背景图像添加到#background 标记时它没有？为什么呢？这是 application.html.erb 文件，我在其中调用#background id：

   <!DOCTYPE html>
    <html>
      <head>
        <title><%= @page_title %></title>
        <%= csrf_meta_tags %>


        <!-- Load in the stylesheet file 'application.scss' -->
        <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
        <!-- Load in the javascript file 'application.js' -->
        <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

      </head>


      <body>
        <div class="site-wrapper">
          <div class="site-wrapper-inner">
            <div class="cover-container">

            <div id="background"></div>



            <!-- Alerts for devise -->
            <p class="notice"><%= notice %></p>
            <p class="alert"><%= alert%></p>


            <!-- Render the nav bar from the shared folder -->
            <%= render "shared/application_nav"%>


            <!-- Yield content -->
            <%= yield %>

            <!-- Render footer from the shared folder -->
            <%= render "shared/footer"%>

            <!-- Load in Gemfile for the Copyright Logo -->
            <%= source_helper %>

          </div>
        </div>
      </div>
      </body>
    </html>

将标签更改为底部并没有改变任何东西。使用 background-image、image-url、url('background.jpg') 的变体；相反也没有帮助。

-webkit-transform 等都是从#background id 工作的。

有什么想法会导致这种情况吗？

提前致谢！

【问题讨论】：

谢谢！我已经尝试过了，但图像仍然没有出现，即使我改变了 div 的高度/宽度（我之前做过），图像仍然不可见。这是一些错误，因为将 id/class 的名称更改为其他名称最终解决了问题。

标签： html css ruby-on-rails ruby-on-rails-5

【解决方案1】：

1 - 大部分时间取决于您在<div> 中的内容

2 - 否则您可以将高度和宽度设置为 100%
然后将此行添加到您的 (#background) 中：

background-repeat: no-repeat;
background-attachment: fixed;
background-color:orange;
background-position: center center;
background-size: auto auto;

所以它变成了：

#background {
  position: fixed;
  width: 100%;
  height: 100%;
  top:50%;
  left:50%;
  z-index: -100;

  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  background: url(background.jpg);

  background-repeat: no-repeat;
  background-attachment: fixed;
  background-color:orange;
  background-position: center center;
  background-size: auto auto;

}

见：Example

当然，您可以根据自己的风格更改（背景颜色）值
如果您希望根据您的 <div 内容增加宽度，则只需删除 width: 100%; height: 100%; 或将它们手动设置为您想要的任何大小。

【讨论】：

【解决方案2】：

您的语法没有问题，但您的部门是空的。如果您向该分区添加一些内容，则会出现背景图像，
或者给出图像的实际高度而不是 auto。

【讨论】：

感谢您的建议！在底部，我提到在 div 中放置一些东西，例如，yield 或 div 背景 id 下的任何东西，不会改变任何东西。改变高度，宽度也没有帮助。

【解决方案3】：

所以似乎发生了一些错误。在将 id 更改为一个类并将其重命名为 test123 之类的乱码后，它终于起作用了。我已经加倍检查了我的 scss 文件中是否已经有一个名为 background 的 id/class（我使用的是 bootstrap 4 中的模板），但没有找到。

无论如何，仍然感谢您的时间和建议！

编辑：实际上，问题如下：

#background{


}

工作正常，

#background {


}

不是。注意第一个括号和背景之间的空间。我猜 java / jquery gem 弄乱了我的 scss 或其他东西，但删除空间最终完全修复了它。

【讨论】：